如何消除导航栏和下一个部分之间的小白空间？如何消除悬停选择器上的小灰空间？-PHP中文网问答

我正在将此网站编码为 freecodecamp 上 HTMl 课程的最后一个项目，但遇到了两个错误，我不知道如何修复。一方面，我的导航栏和第一部分之间有一条小白线。另一方面，我使用悬停选择器将导航栏链接的背景设为灰色，但底部仍保留一条深色的小线。

白线如下所示：

为了修复第一条白线，我尝试删除填充和边距（这删除了边缘上的一些空白，但没有删除两个部分之间剩下的空白。我还将所有 CSS 背景更改为蓝色找出哪个部分填充了空间，并且当我更改正文的背景时它才变成蓝色，背景已经将边距和填充设置为 0。

这是小黑线的样子：正如你所看到的，灰色背景下面有一条小黑线！

对于这个，我尝试了解导航栏中不同标签占用的确切空间（li、ul、a...），但无济于事，我真的不明白这些标签如何决定占用空间或不占用空间在导航栏中。我找不到任何占用额外黑线空间的标签。

这是 HTML：

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Double Team Cooking</title>
    <link rel='stylesheet' href='styles.css'>
  </head>
  <body>
    <section id="welcome">
      <nav id='navbar'>
        <ul>
          <li><a href="#whodis">Who Am I?</a></li>
          <li><a href="#Projectos">My Projects</a></li>
          <li><a href="#hola">Contact</a></li>
        </ul>
      </nav>
    </section>
      
      
    <section id='Who-Am-I'>
      <h2 id='whodis'>Who Am I?</h2>
      <p> Hey, I'm Pedro.</p>
      <p> A man, a cook, a student, a coder, a business developer, a problem solver.</p>
    </section>

    <section id='Projects'>
      <h2 id='Projectos' class="project-title">My Projects</h2>
      <p>So, what am I working on?</p>
      <div id="electriccar"></div>
      <div id="website"></div>
      <div id="TWR"></div>
    </section>

    <section id="Contact">
      <h2 id="hola">Contact Me</h2>
      <p>You'd like to reach out? Of course! Feel free to reach out to me through these mediums!</p>
    </section>
    
  </body>
</html>

这是 CSS：

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  width: 100%;
  padding: 0px;
  margin: 0px;
}



nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 40px;
  background-color: rgb(24,24,24);
}

nav ul {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  padding-left: 0px;
  width: 100%;
  height: 100%;
  margin: 0px;
  align-items: center;
  
}

nav li {
  display: inline-block;
  
  
}

li a {
  text-decoration: none;
  color: white;
  padding: 10px;
  
}

li a:hover {
  background-color: rgb(64,64,64);

}

#Who-Am-I {
  height: 100%;
  background-color: rgba(0,30,0,0.8);
}

非常感谢您的帮助！