为什么这些导航栏链接会在标题之外的部分顶部溢出？

Question

当页面显示在较小的视口@media (max-width: 900px) 上时，我试图让导航栏上的链接占据全宽，而不是占据放置在以下部分的背景图像的任何区域。

为什么汉堡菜单图标不显示？

我正在尝试堆叠导航菜单项，然后在较小的视口上完整显示背景图像。

header {
  position: fixed;
  z-index: 100;
  width: 100%;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--secondary-dark);
  color: var(--main-white);
  padding: 5px 30px;
  height: 90px;
}

.logo {
  font-size: var(--fs-600);
  margin: 0.5rem;
  text-decoration: none;
  font-family: var(--ff-nav);
  font-weight: var(--fw-400);
  letter-spacing: 1px;
}

.navbar-items ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.navbar-items li a {
  text-decoration: none;
  color: var(--main-white);
  padding: 1rem;
  display: block;
}

.navbar-items li:hover a {
  color: var(--blue-primary);
}

.toggle-button a {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 21px;
}

.toggle-button a .bar {
  height: 3px;
  width: 100%;
  background-color: var(--main-white);
  border-radius: 10px;
}

@media (max-width: 900px) {
  .toggle-button {
    display: flex;
  }

  .navbar-items {
    /* display: none; */
    width: 100%;
    background-color: var(--secondary-dark);
  }

  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .navbar-items ul {
    flex-direction: column;
    width: 100%;
  }

  .navbar-items li {
    text-align: center;
  }

  .navbar-items li a {
    padding: .5rem 1rem;
    width: 100;
  }

  .navbar-items.active {
    display: flex;
  }
}


/* //////////////////////
      Main 
/////////////////////// */

.welcome {
  position: relative;
  outline: 2px solid red;
  padding-top: 70px;
  height: 700px;
  background-image: url("/img/background.png");
  background-position: center;
  background-size: cover;
}

.welcome p {
  position: absolute;
  display: block;
  bottom: 0;
  right: 0;
  margin: 20px 50px;
  font-size: 3em;
  color: var(--clr-section-background);
  letter-spacing: 0.5px;
}

<header>
  <nav class="navbar">
    <div class="logo">
      <span>Brand</span>
    </div>
    <div>
      <a href="#">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
    </div>
    <div class="navbar-items">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="index.html#about">About</a></li>
        <li><a href="index.html#services">Services</a></li>
        <li>
          <a href="#blog">Blog</a>
        </li>
        <li><a href="#newsletter">Newsletter</a></li>
      </ul>
    </div>
  </nav>
</header>

<!--mission statement------------------------------------------>

<section class="welcome">
  <div>
    <p>#OnPoint</p>
  </div>
</section>

Answer 1

问题已解决，我只需要在导航栏上添加一个 z-index 并删除 ul 上的填充，以便让汉堡菜单在较小的视口上全宽显示。