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?
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
.