我将如何删除导航栏元素底部和右侧的那些小间隙？

Question

我试图消除我的 nav-link 元素与底部和右侧的 navbar 之间的那些小间隙，但似乎无法弄清楚。我尝试设置 min-height: 0 并将其更改为 display: flex 并调整 justify-content 和 align-items 属性，但没有达到预期的结果。我还能怎样让它发挥作用？

截图如下：

这是我的代码：

header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#logo-container {
  width: 50%;
  text-align: left;
  background-color: lightblue;
}

#navbar {
  font-size: 1.4em;
  width: 50%;
  text-align: right;
  background-color: orange;
  padding: 10px 0px 10px 0px;
}

.nav-link {
  padding: 10px;
  text-decoration: none;
  background-color: green;
}

.nav-link:hover {
  background-color: gray;
}

<header>
    <div id="logo-container"></div>
    
    <nav id="navbar">
      <a class="nav-link" href="#welcome-section">About</a>
      <a class="nav-link" href="#projects">Projects</a>
      <a class="nav-link" href="#contact">Contact</a>
    </nav>
</header>

Answer 1

Using flex with justify-content: flex-end; we can achieve desire result

header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#logo-container {
  width: 50%;
  text-align: left;
  background-color: lightblue;
}

#navbar {
  font-size: 1.4em;
  width: 50%;
  text-align: right;
  background-color: orange;
  /* padding: 10px 0px 10px 0px; */
  display: flex;
  align-content: end;
  justify-content: flex-end;
}

.nav-link {
  padding: 10px;
  text-decoration: none;
  background-color: green;
}

.nav-link:hover {
  background-color: gray;
}

<header>
    <div id="logo-container"></div>
    
    <nav id="navbar">
      <a class="nav-link" href="#welcome-section">About</a>
      <a class="nav-link" href="#projects">Projects</a>
      <a class="nav-link" href="#contact">Contact</a>
    </nav>
</header>

Answer 2

替换这个css

#navbar {
font-size: 1.4em;
width: 50%;
text-align: right;
background-color: orange;
/* padding: 10px 0px 10px 0px; */
display: flex;
justify-content: flex-end;

}

我将如何删除导航栏元素底部和右侧的那些小间隙？

How would I remove those small gaps on the bottom and right side of the navbar elements?

html

css

navbar

responsive-design