在左侧捕捉徽标和公司，在右侧捕捉导航栏

Question

我正在为目标网页设置页眉和导航栏。我的目标是在徽标-<h1>的旁边放置公司名称-<img>。但是我需要将导航栏向右猛击。导航栏还需要响应页面的宽度。我已经提供了我要完成的工作的基本图片。我的目标是将来能够用几乎任何图像或名称替换徽标和公司名称。整个标头需要固定在顶部。

这是我的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

将徽标-<img>和公司名称-<h1>嵌套到自己的div中，并使用display: flex;使它们水平对齐。

* {
  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>