我的英雄内容使我的响应式NAV重叠

Question

我正在对项目进行更改，当我对响应迅速的磁带进行检查时，它不再高于英雄文字。我尝试了很多事情，但似乎没有任何作用。

header {
  background: url('/images/jellyfish.png') no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
  color: var(--white);
}

.content {
  margin-top: 10rem;
  animation: introLoad 1.9s forwards;
}

@media only screen and (max-width:920px) {
  background-color: var(--darker-green);
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: 300px;
  transform: translateX(100%);
  padding-top: 3.5rem;
  transition: transform 0.3s ease-in-out;
  justify-content: center;
  align-items: center;
  display: flex;
}

<header>
  <div class="container">
    <div class="nav">
      <nav class="navbar">
        <ul>
          <li>About Us</li>
          <div class="dropdown">
            <li class="dropbtn">
              Clients
              <i class="fa fa-caret-down"></i>
            </li>
            <div class="dropdown-content">
              <a href="#">Client 1</a>
              <a href="#">Client 2</a>
              <a href="#">Client 3</a>
            </div>
          </div>
          <div class="dropdown">
            <li class="dropbtn">
              Candidates
              <i class="fa fa-caret-down"></i>
            </li>
            <div class="dropdown-content">
              <a href="#">Candidates 1</a>
              <a href="#">Candidates 2</a>
              <a href="#">Candidates 3</a>
            </div>
          </div>
          <div class="dropdown">
            <li class="dropbtn">
              Sectors
              <i class="fa fa-caret-down"></i>
            </li>
            <div class="dropdown-content">
              <a href="#"> Sectors 1</a>
              <a href="#"> Sectors 2</a>
              <a href="#"> Sectors 3</a>
            </div>
          </div>
          <li>News</li>
          <li>Contact</li>
        </ul>
      </nav>
      <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
      </div>
      <i class="fa-solid fa-magnifying-glass"></i>
    </div>
    <div class="content">
      <h1>All the answers under one roof</h1>
      <p>
        IT and Tech Recruitment for everything from startups to large enterprises
      </p>
      <button class="more">Read More</button>
    </div>
  </div>
</header>

这是屏幕宽度920px时响应式NAV。 .content是与我的响应式NAV重叠的。我已经检查了我的存储库是否有未保存的更改，但是我必须定期承诺。