Новичок с проблемой адаптивных сайтов ⇐ CSS

[Anonymous]

enter image description here I NEED HELP! I am new in development and trying responsive sites and when I use the toggle devices toggle it doesnt hide the links it just kinda expands the page, please refer to the image for a better description of what im referring to.

P.S I was just practicing, I apologize for the bad layout

Here is the code:
[*] Document Wew

• hehehh
• hehehh
• hehehh
• hehehh

* { margin: 0; padding: 0; box-sizing: border-box; } html{ width: 100%; overflow-x: hidden; } nav { align-items: center; background-color: red; display: flex; padding: 0 5rem; justify-content: space-between; height: 90px; } nav ul { display: flex; gap: 40px; } nav li { list-style: none; } .burger div { width: 25px; height: 3px; margin: 4px; background-color: black; } .burger { display: none; } @media screen and (max-width: 940px) { body { overflow-x: hidden; } .burger { display: block; } .links { position: absolute; right: -100%; top: 5.6rem; height: 300px; width: 200px; flex-direction: column; background-color: red; transition: all 0.50s ease; } .links li { position: relative; left: 30px; width: 100px; top: 20px; } .burger { z-index: 1; } } .nav-active { right: 0%; } const Navslide = () => { const burger = document.querySelector(".burger") const links = document.querySelector(".links") burger.addEventListener("click", () => { links.classList.toggle("nav-active") }) } Navslide()

Источник: https://stackoverflow.com/questions/781 ... sive-sites