[FIXED] Why is there a gap between the header and the main div?

Issue

There is a gap between the header and the main that is the same color as the background color I set for the body tag (black). I've tried making overflow: hidden and margin: 0 but that did not work either.

What is causing this gap?

(.menu does not show if the menu button has not been clicked - so display: none)

body {
  color: #fff;
  font-family: Gotham;
  font-weight: 400;
  background-color: #000;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow-x: hidden;
}

main {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

header {
  height: 3.4rem;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.menu {
  display: none;
  overflow-x: none;
  margin-top: 0;
}

.top {
  background-color: var(--purple);
  top: 0;
  margin: 0;
  padding: 0;
}

.top-container {
    margin: 2rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<header>
  <div class="header-container">
    <div class="left">
      <img src="img/logo.jpg" alt="">
    </div>
    <div class="right">
      <img src="img/user.png" alt="">
      <i class="fa-solid fa-bars fa-xl"></i>
    </div>
  </div>
</header>
<nav class="menu">
  <div class="menu-container">
    <!-- content -->
  </div>
</nav>
<main>
  <section class="top">
    <div class="top-container">
      <!-- content -->
    </div>
  </section>
</main>

How do I get rid of the gap?

Solution

It turns out that all I needed to do was make the top-container margin-top: 0. The margin for the top and bottom before was at 2rem.

So it looked like:

.top-container {
    margin: 0rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

So to add space between the top of the container and the content, you need to add margin to the actual content not the container.

Answered By - tices

Answer Checked By - David Goodson (PHPFixing Volunteer)