将 Logo 和 Company 捕捉到左侧，将导航栏捕捉到右侧

Question

I'm styling a Header and Navigation bar for a landing page. My aim is to have the company name - <h1> , placed right next to logo - <img> . However I would need the navigation bar to be slammed to the right.The navigation bar also need to be responsive to the width of the page. I've included a basic picture of what I'm attempting to have done. My goal is to be able to replace Logo and Company name with pretty much any image or name in the future. The whole header needs to fixed at the top.

here is my CSS & HTML

 * { box-sizing: border-box; font-size: 10px; margin: 0px; padding: 0px; } h1 { font-size: 3rem; } #header-img { height: 3rem; } #nav-link { list-style-type: none; } #header { display: flex; justify-content: space-between; align-items: center; } nav > ul { display: flex; justify-content: space-around; } #nav-bar { width: 35vw; }

 <header id="header"> <img id="header-img" src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" alt=""> <h1>Company Name</h1> <nav id="nav-bar"> <ul> <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li> </ul> </nav> </header>

Answer 1

Nest the Logo - <img> and Company Name - <h1> into it's own div and use display: flex; to have them align horizontally.

 * { box-sizing: border-box; font-size: 10px; margin: 0px; padding: 0px; } h1 { font-size: 3rem; } #header-img { height: 3rem; } #logo-companyname { display: flex; } #nav-link { list-style-type: none; } #header { display: flex; justify-content: space-between; align-items: center; } nav > ul { display: flex; justify-content: space-around; } #nav-bar { width: 35vw; }

 <header id="header"> <div id="logo-companyname"> <img id="header-img" src="https://w0.pngwave.com/png/91/429/web-development-html-css3-the-ohana-code-logo-2cpaper-projection-shaded-1660937-html-dropdown-js-png-clip-art.png" alt=""> <h1>Company Name</h1> </div> <nav id="nav-bar"> <ul> <li id="nav-link"><a href="#nav-link1">Nav Link 1</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 2</a></li> <li id="nav-link"><a href="#nav-link2">Nav Link 3</a></li> </ul> </nav> </header>