为什么“溢出：隐藏”；隐藏导航栏上方和下方的空间？

Question

我的理解是，属性“溢出”可帮助您控制元素是否溢出其他元素。

在我的容器类选择器上使用overflow:hidden;之前，在导航栏的上方和下方似乎都有一个空格。使用它之后，它会隐藏两个空格，以确保所有div彼此紧靠，这正是我想要的。

我只是不太了解它为什么起作用。有东西溢出吗？

请帮助我理解。谢谢。

我将overflow:visible;保留在代码中，以便在将其更改为overflow:hidden;之前了解它的状态

这也是我第一次发布有关堆栈溢出的问题，所以我希望自己做对了。

body {
  margin: 0;
  font-family: 'Helvetica', 'Arial', sans-serif;
  color: black;
  font-size: 20px;
}

header {
  background: #121212;
  color: white;
  font-family: Helvetica;
  font-weight: 100;
  font-size: 30px;
}

nav {
  background: orange;
  text-align: center;
  color: white;
}

.container {
  width: 60%;
  margin: auto;
  overflow: visible;
}

.mainPart {
  margin: 0;
  padding: 0;
  background-image: url(whatever2.jpeg);
  background-size: 100%;
  color: white;
}

<header>
  <div class="container">
    <h1> Title </h1>
  </div>
</header>

<nav>
  <div class="container">
    <ul>
      <li> Home </li>
      <li> About </li>
      <li> Wonders </li>
      <li> Contact </li>
    </ul>
  </div>
</nav>


<section class="mainPart">
  <div class="container">
    <h3> Heading3 </h3>
  </div>
</section>