title: My hero content is overlapping my responsive nav
body: <p>I was making changes to my project and when I checked it over my responsive navbar was no longer above the hero text. Ive tried a lot of things but nothing seems to work.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;div class="container"&gt;
      &lt;div class="nav"&gt;
        &lt;nav class="navbar"&gt;
          &lt;ul&gt;
            &lt;li&gt;About Us&lt;/li&gt;
            &lt;div class="dropdown"&gt;
              &lt;li class="dropbtn"&gt;
                Clients
                &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;div class="dropdown-content"&gt;
                &lt;a href="#"&gt;Client 1&lt;/a&gt;
                &lt;a href="#"&gt;Client 2&lt;/a&gt;
                &lt;a href="#"&gt;Client 3&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="dropdown"&gt;
              &lt;li class="dropbtn"&gt;
                Candidates
                &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;div class="dropdown-content"&gt;
                &lt;a href="#"&gt;Candidates 1&lt;/a&gt;
                &lt;a href="#"&gt;Candidates 2&lt;/a&gt;
                &lt;a href="#"&gt;Candidates 3&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="dropdown"&gt;
              &lt;li class="dropbtn"&gt;
                Sectors
                &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
              &lt;/li&gt;
              &lt;div class="dropdown-content"&gt;
                &lt;a href="#"&gt; Sectors 1&lt;/a&gt;
                &lt;a href="#"&gt; Sectors 2&lt;/a&gt;
                &lt;a href="#"&gt; Sectors 3&lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;li&gt;News&lt;/li&gt;
            &lt;li&gt;Contact&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
        &lt;div class="burger"&gt;
          &lt;div class="line1"&gt;&lt;/div&gt;
          &lt;div class="line2"&gt;&lt;/div&gt;
          &lt;div class="line3"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;i class="fa-solid fa-magnifying-glass"&gt;&lt;/i&gt;
      &lt;/div&gt;
      &lt;div class="content"&gt;
        &lt;h1&gt;All the answers under one roof&lt;/h1&gt;
        &lt;p&gt;
          IT and Tech Recruitment for everything from startups to large enterprises
        &lt;/p&gt;
        &lt;button class="more"&gt;Read More&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is the responsive nav when at screen width 920px. The <code>.content</code> is the one that is overlapping my responsive nav. I've checked my repository for unsaved changes but I must have committed regularly.</p>