如何删除导航栏中徽标和列表项之间的 space？

Question

我希望导航栏项目在徽标旁边左对齐，但我无法实现。

有人知道这是怎么回事吗？

外观：

我想要的space消失了：

我的HTML代码：

<nav id="nav-bar">

<a href=""><img src="https://assets.codepen.io/7471668/logo+pic.png" id="header-img" alt="company-logo" /></a>

<ul class="nav__menu">
  <li class="nav__item">
    <a class="nav-link" href="">Options</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">How it works</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">Sign-up</a></li
</ul>
  
</nav>

我的CSS:

#nav-bar {
  display: flex;
  position: fixed;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  }
.nav__menu {
  display: flex;
  font-size: 0.95rem;
  }
.nav__item {
  margin-right: 3rem;
  font-family: archivo;
  }
.nav-link {
  color: white;
  text-decoration: none;
  }
.nav-link:hover,
.nav-link:focus-visible {
  box-shadow: 0 4px 0 -1px #FFF;
  }
#header-img {
  width: 25%;
  margin-top: 6px;
  margin-left: 10px;
  margin-right: 0;
  }

Answer 1

#nav-bar {
  display: flex;
  position: fixed;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 1);
  }
.nav__menu {
  display: flex;
  font-size: 0.95rem;
  }
.nav__item {
  margin-right: 3rem;
  font-family: archivo;
  }
.nav-link {
  color: white;
  text-decoration: none;
  }
.nav-link:hover,
.nav-link:focus-visible {
  box-shadow: 0 4px 0 -1px #FFF;
  }
#header-img {
/* from width:25% */
  width: 100px;   /*Use px*/
  margin-top: 6px;
  margin-left: 10px;
  margin-right: 0;
  }

<nav id="nav-bar">

<a href=""><img src="https://assets.codepen.io/7471668/logo+pic.png" id="header-img" alt="company-logo" /></a>

<ul class="nav__menu">
  <li class="nav__item">
    <a class="nav-link" href="">Options</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">How it works</a></li>
  <li class="nav__item">
    <a class="nav-link" href="">Sign-up</a></li
</ul>
  
</nav>

我提供了一个片段，请检查它是否是您正在寻找的输出。

只需使用“px”来调整图片的宽度。我将 width: 25%; 更改为 width: 100px;

如何删除导航栏中徽标和列表项之间的 space？

How to delete this space between the logo and list items in the nav bar?

html

css

navigation

html-lists