'Why is there a gap between the header and the main div?

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?

htmlcssmenuheadernav


Solution 1:[1]

I added background-color to header and main to see if there is a gap. There's no gap man? Could you please show where the gap is ?

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;
    background:red;
}

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

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

.top {
    background-color: var(--purple);
    top: 0;
    margin: 0;
    
<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>

Solution 2:[2]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mbay
Solution 2

Related Questions