覆盖不覆盖整个标题

我真的不知道该怎么说这个问题,但我会尽力的。 所以,我试图在背景图像的顶部加上一个覆盖,标题本身就占了100vh,但是当我把包含图像的覆盖放进去时,导航中的一些填充物会将背景颜色向下推到视区下面。我试着从导航元素中去掉一些空白,这会使背景稍微上升一点,但不会一直上升。也许我错过了一件很简单的事情,但我似乎没法理解。

这里有一个到代码笔的链接(我知道代码有点乱,这只是一个测试): https://codepen.io/Jmp93/pen/BMJwov

<nav id="main-nav">
    <h3>TEST|Web</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></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;
}

任何帮助都将不胜感激,谢谢。