Overlay Not Covering Entire Header - html

Question

I'm not really sure how to word this question but I'll try.
So, I'm trying to get an overlay over the top of a background image, the header itself is taking up 100vh, but when I place the overlay with the image included, some padding from the nav is pushing the background colour down below the viewport it seems. I've tried to take margin off the nav elements and it brings the background up a little but not all the way. Maybe I'm missing something very simple here but I just can't seem to get my head around it.
Here's a link to the codepen (I know the code is a bit of a mess, it's just a test): https://codepen.io/Jmp93/pen/BMJwov
<nav id="main-nav">
<h3>TEST|Web</h3>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<header>
<h1>Test Text Sample</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sunt dolores, dolorum minima id beatae aperiam saepe
sapiente animi quas earum?</p>
</header>
<section id="start-section">
<div class="container">
<h1 class="m-heading">Some Text</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta possimus dolore temporibus aut,
reiciendis voluptatum voluptate consequatur ducimus. Sunt minus nihil nulla in commodi. In officiis, harum amet
eos nesciunt illum rerum aliquam quasi modi natus quis laudantium qui quae?</p>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
background: #333;
color: #fff;
margin: 0;
line-height: 1.5;
}
.m-heading {
font-size: 2rem;
margin-bottom: .75rem;
}
.lead {
font-size: 1.2rem;
}
header {
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
height: 100vh;
text-align: center;
}
header:before {
content: '';
background: url('https://source.unsplash.com/1600x900/?nature,water') no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.2;
z-index: -1;
}
header h1 {
font-size: 4rem;
margin: 1rem;
}
#main-nav {
display: flex;
position: sticky;
top: 0;
left: 0;
justify-content: space-between;
}
#main-nav h3 {
font-size: 2rem;
margin: 2rem;
}
#main-nav ul {
display: flex;
justify-items: center;
font-size: 1.2rem;
margin: 2rem;
}
#main-nav ul li {
list-style: none;
}
#main-nav ul li a {
color: #fff;
text-decoration: none;
padding: 1rem;
}
#main-nav ul li a:hover {
background: #444;
border-radius: 25px;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 2rem;
}
#start-section {
background: #fff;
color: #000;
text-align: center;
}
Any help would be appreciated, thanks.

Answer 1

Just try to apply a position relative to the header itself :) usually if you use a position absolute, the main element containing it should be relative. That is the correct way of making the absolute element be positioned at 100% of its parent's width and height and not floating without reference.