I was trying to build a responsive burger menu that appears and disappears (by onclick toggling active class in js) but now it is not disappearing but it is just on the right of my page (now there is a scrollbar too).
What did I mess up? I was literally just following a tutorial but I can’t figure out where I went wrong. Please help!

HTML:

    <div class="header">
        <div class="nav-container">
            <span class="logo lato-bold">DacHOW<i class="fa-regular fa-circle-question"></i></span>
            <nav class="nav">
                <ul class="nav-ul">
                    <li class="nav-link"><a href="#">Home</a></li>
                    <li class="nav-link"><a href="#">First steps</a></li>
                    <li class="nav-link"><a href="#">BAMF/Asylum</a></li>
                    <li class="nav-link"><a href="#">Bezahlkarte</a></li>
                    <li class="nav-link"><a href="#">Health</a></li>
                    <li class="nav-link"><a href="#">School</a></li>
                </ul>
            </nav>
            <span class="hamburger-menu material-symbols-outlined"><i class="fa-solid fa-bars"></i>  
       </div>
    </div>

CSS:

/* NAVIGATION */

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  margin: 0 auto;
}


.nav-container .logo {
  font-size: 2.5rem; 
  font-weight: bold;  
}

.nav {
  display: flex;
  flex-grow: 1;
}

.nav-ul{
  margin: 0 auto;
}

.nav-container, .nav-ul {
  display: flex;
  gap: 1.6rem;
  font-size: 1.2rem;
}

.hamburger-menu {
  display: none; /* Hidden by default for larger screens */
  cursor: pointer;
}

.dropdown-content{
  display: none;
}

/* NAVIGATION MEDIA QUERY*/

@media (max-width: 700px) {
  .nav-container .logo {
      font-size: 1.2rem;
      z-index: 2;
  }

  .nav {
      flex-direction: column;
      gap: 2rem;
  }

  .nav-ul{
      flex-direction: column;
      gap: .6rem;
  }

  .hamburger-menu {
      display: block;
      z-index: 2;
  }

  .nav {
      position: absolute;
      top: 0;
      right: -100%;
      bottom: 0;
      width: 100%;

      padding-top: 6rem;

      align-items: center;
      text-align: center;
      background-color: #4D4DDB;
      color: white;

      transition: 0.15s ease-in-out;
  }

  .nav.active {
      right: 0;
  }

}

JS

const hamburgerMenu = document.querySelector(".hamburger-menu");
const nav = document.querySelector(".nav");

hamburgerMenu.addEventListener("click", () => {
    nav.classList.toggle("active")
});

I tried to check the nav class in particular and I think the problem is not with its active state but the default state (with the right: -100%). In the tutorial it was this way though and it “disappeared” instead of well… being next to the page.