Why are my header and main sections separated by white space? [duplicate] - html

Question

This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 8 months ago.
I am trying to create a hero box but my herobox and navbar have white space inbetween. I can not get rid of it! I am guesing it has to do with flexbox and/or grid but i'm not sure.
I colored the nav purple and the herobox blue to try to figure why they don't follow each other. I tried messing with the margin and display in CSS.
Chrome inspection of elements:
My code so far:
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
}
.left {
padding: 20px;
float: left;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: left;
}
.right {
padding: 20px;
float: right;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
#media screen and (max-width: 800px) {
.left,
.right {
width: 100%;
/* The width is 100%, when the viewport is 800px or smaller */
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
}
<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<a href="#Coupons">
<p>Coupons!</p>
</a>
</div>
<div class="right">
<a href="#Order">
<p>Order Online!</p>
</a>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button>View our menu!</button>
</div>
</main>

Answer 1

Solution
Set the h1 to margin-top: 0.
Explanation
The h1 has a margin-top that is creating the space with the header section.
This is happening because, even though the h1 is a descendant of the main element, its top margin is superseding the top margins of its ancestors (.hero and main).
And this is happening because of the rules of margin collapsing.
§ 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin.
Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse, except [in certain cases].
Horizontal margins never collapse.
The top margin of an in-flow block element collapses with its first
in-flow block-level child's top margin if the element has no top
border, no top padding, and the child has no clearance.

Answer 2

It appears that the margin top on the header is causing the problem. try giving it a margin of 0 and giving it padding if you need and see what happens
h1 {
font-size: 15vw;
margin-top: 0;
}

Answer 3

Extra margin is from h1 (commented in code, info here).
Useful snippet for making completely own styling:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
Removes all margins and padding and also makes all elements same box-sizing.
Also, for example, re-create nav using grid styles, try to avoid float in positioning of elements, its intended for positioning images in text or etc.
body {
font-family: sans-serif;
margin: 0;
}
main {
margin-top: none;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
.topnav {
overflow: hidden;
background-color: blueviolet;
display:grid;
grid-template-columns:1fr 1fr;
}
.left {
padding: 20px;
place-self: center start;
box-sizing: border-box;
text-decoration: none;
}
.right {
padding: 20px;
place-self: center end;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
#media screen and (max-width: 800px) {
.topnav{
grid-template-columns:1fr;
}
}
/*HERO BOX*/
.hero {
background-color: aqua;
}
h1 {
font-size: 15vw;
margin-top:0; /* fix */
}
<header>
<!--NAVIGATION BAR-->
<nav>
<div class="topnav">
<div class="left">
<p>Coupons!</p>
</div>
<div class="right">
<p>Order Online!</p>
</div>
</div>
</nav>
</header>
<main>
<div class="hero">
<h1>Super Restaurant!</h1>
<button>View our menu!</button>
</div>
</main>