I'm trying to Not make my navbar collapse with other sections (My navbar is collapsing with my About us ) idk why?

Question

So I have been trying to make my navbar not collapse with other elements but it seemed like it will not work at all. At the same time, I have to do it Because I have designed my navbar to collapse and expand when clicked on the bars (to make it responsive using media query).

I'm trying to Not make my navbar collapse with other sections (My navbar is collapsing with my About us )I tried doing it position:fixed; but then When the media query for navbar activates the bar image cannot be seen.

Codepen: https://codepen.io/Pawan_Dev_World/pen/wvqZYpw

$(document).ready(function(){
    $('.list').click(function(){

        $('nav').toggleClass('active')

    })
})

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Allura&family=Josefin+Sans:wght@300&display=swap');

  body {
      margin: 0%;
      padding: 0%;
      overflow:hidden;
    }

    /* NavBar */
    
    nav {
      background-color: #E5E5E5;
      width: 100%;
      position: absolute;
    }
    
    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    li {
      float: right;
      padding: 2%;
      font-family: 'Poppins', sans-serif;
      color: #ff812c;
      transition: .3s;
    }
    
    a {
      text-decoration: none;
      display: block;
      color: #ff812c;
      transition: .3s;
    }
    

    
    ul > li:hover {
      background-color: #ff812c;
      
      
      
    }
    
    ul > li:hover a{
      color: rgb(223, 223, 223);
    }

    .list {
      width:20px;
      display:none;
      top: 2%;
      float: right;
      padding: 20px;
      background: #E5E5E5;
      padding-left: 100%;     
      cursor: pointer;

    
    }


  @media screen and (max-width:700px){
    
    nav  {
      width: 100vw;
      height: 100vh;
      left: -150%;
      top: 60px;
      transition: 0.5s;

    }
    nav.active {
      left: 0%;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    

    .list {
      
      display: block;
      
      
    }


    #ul-nav li:first-child{
      order: 4;
    }
    
    #ul-nav li:nth-child(2){
      order: 3;
    }
    
    #ul-nav li:nth-child(3){
      order: 2;
    }
    
    #ul-nav li:nth-child(4){
      order: 1;
    }

  }



  /* Accordin  */


  .container {
      background-color:rgb(223, 223, 223) ;
      padding: 20px;
    
  }


  .acc-h1 {
      font-family: 'Allura', cursive;
  }

  .acco{
      display: flex;
      
      
  }

  .acco-tabs{
      background-color: #ff812c;
      padding: 20px;
      margin: 10px;
      flex: 1 1 0;
    
  }



  @media screen and (max-width:600px) {

      .mvc {
          display: flex;
          flex-wrap: wrap;
      }
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- NavBar -->
   
   
            
        <nav class="active">

            <ul id="ul-nav" >
                <li><a href="" class="a-f">About</a></li>
                <li><a href="" class="a-f">Contact</a></li>
                <li><a href="" class="a-f">Products</a></li>
                <li><a href="#" class="a-f">Home</a></li>
            </ul>
            
        </nav>  
        <img src="bars-solid.svg" alt="navbar-list" class="list" >





    <!-- About us -->

 <div class="container" id="about-us">

  <h1 class="acc-h1">About Us</h1>

  <div class="acco">

      <div class="acco-tabs">
      <h3 class="heading-acco">Our Vision</h3>
      <p class="para-acco">Our Vision Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo nulla, luctus at risus non, pharetra eleifend orci. Aenean sed urna nec lorem malesuada commodo. Fusce ultrices placerat fermentum. Proin at blandit sapien, in consectetur lorem. Praesent varius sit amet purus sit amet porta.</p>
      </div>


      <div class="acco-tabs">
          <h3 class="heading-acco">Our Mision</h3>
          <p class="para-acco">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo nulla, luctus at risus non, pharetra eleifend orci. Aenean sed urna nec lorem malesuada commodo. Fusce ultrices placerat fermentum. Proin at blandit sapien, in consectetur lorem. Praesent varius sit amet purus sit amet porta.</p>
          
      </div>


      <div class="acco-tabs">
          <h3 class="heading-acco">Our Core Values</h3>
          <p class="para-acco">Trust… Transparency… Integrity... Accountability.</p>
          </div>
      </div>

      <br>


  <pLorem ipsum dolor sit amet, consectetur adipiscing elit. Proin leo nulla, luctus at risus non, pharetra eleifend orci. Aenean sed urna nec lorem malesuada commodo. Fusce ultrices placerat fermentum. Proin at blandit sapien, in consectetur lorem. Praesent varius sit amet purus sit amet porta.</p>
      
  </div>