Why does "overflow:hidden;" hide the space above and below my navigation bar?

Question

My understanding is that the property 'overflow' helps you to control whether elements spill over other elements.

Before using overflow:hidden; on my container class selector, there appears to be a space above and below the navigation bar. After using it, it hides both of the spaces making sure that all the divs are right next to each other, which is exactly what I want.

I just don't really understand why it works. Is something overflowing?

Please help me understand. Thank you.

I'm going to keep overflow:visible; in the code just so you see how it is before changing it to overflow:hidden;

Also this is my first time posting a question on stack overflow so I'm hoping that I'm doing this right.

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>