Почему мое адаптивное раскрывающееся меню не исчезает (а смещается вправо), когда я нажимаю меню-гамбургер? ⇐ CSS

[Anonymous]

Я пытался создать адаптивное бургер-меню, которое появляется и исчезает (при нажатии на активный класс в js), но теперь оно не исчезает, а находится справа от моей страницы (теперь также есть полоса прокрутки).
Что я напутал? Я буквально просто следовал руководству, но не могу понять, где я ошибся. Пожалуйста, помогите!

Код: Выделить всё

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

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

Код: Выделить всё

/* 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;
}
}

Код: Выделить всё

[*]


DacHOW[i][/i]

[list]
[url=#]Home[/url]
[*][url=#]First steps[/url]
[*][url=#]BAMF/Asylum[/url]
[*][url=#]Bezahlkarte[/url]
[*][url=#]Health[/url]
[*][url=#]School[/url]
[/list]

[i][/i]

Я пытался проверить класс навигации, в частности, и думаю, что проблема в том, что не в активном состоянии, а в состоянии по умолчанию (с правом: -100%). Однако в учебнике это было именно так, и оно «исчезло», а не... оказалось рядом со страницей.

Подробнее здесь: https://stackoverflow.com/questions/785 ... ght-when-i