主要的想法是把所有的东西都放在中间，然后把logo从流程中拉出来放在左边。当然，你需要记住在小屏幕上的媒体查询。

更新日期：

#header {
  display:flex; 
  justify-content: center; /* center everything */
  align-items: center;
  margin-top: 20px;
  padding: 0 260px; /* prevent crawling on the logo */
}

.img{
  position: absolute; /* remove the logo from the flow */
  left: 20px;   /* move the logo to left */
  height: 48px;
  width: 100px;
}

#nav-bar > ul {
  display:flex; /* make a horizontal menu */
  gap: 20px;    /* gap between menu items */
  list-style: none;
  padding-left: 0px;
}

.img, #nav-bar > ul > li {
  border: 1px solid gray;
  padding: 5px;
}

<header id="header">
    <div class="img">
        <a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
    </div>

    <nav id="nav-bar">
        <ul id="menu">
            <li><a class="nav-link" href="#menu1">menu1</a></li>
            <li><a class="nav-link" href="#menu2">menu2</a></li>
            <li><a class="nav-link" href="#menu3">menu3</a></li>   
        </ul>
    </nav>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus earum. Perferendis, neque quasi praesentium tempore at laudantium omnis modi sunt. Tenetur cum dolor magnam praesentium iusto illo, delectus doloribus?</p>

以前：

一个二个一个一个

我相信你可以尝试这种布局，你想要的，然后修改它进一步风格您的需要。这将给予你的布局，你要求。

<header id="header">
  <div class="container-1">
    <a href="landingpage.html"
      ><img
        src="https://picsum.photos/200"
        alt="image of the logo"
        id="header-img"
        width="175px"
        height="52px"
    /></a>
  </div>
  <div class="container-2">
    <ul id="menu">
      <li class="menu-item">
        <a class="nav-link" href="#menu1">menu1</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu2">menu2</a>
      </li>
      <li class="menu-item">
        <a class="nav-link" href="#menu3">menu3</a>
      </li>
    </ul>
  </div>
</header>

这是上面html的css

#menu {
     text-decoration: none;
     list-style: none;
     margin: 0;
     padding-inline-start: 0;
    }
 .container-1 {
    display: inline-block;
   }
  .container-2 {
   text-align: center;
   display: inline-block;
   width: calc(100% - 200px);
  }
  .menu-item {
    display: inline-block;
    padding: 1rem;
   }

您可以尝试此操作并进一步设置构件样式。