Переполнение NAVBAR при эмулировании с телефона ⇐ Html

[Anonymous]

Мобильное меню не должно быть видно, и оно не должно переполняться при использовании с телефона. Когда я просто уменьшаю браузер на компьютере, он работает, как и задумано.
Вот мой код.
html: < /p>

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

[*]




HTML & CSS Sandbox




[i]

[list]

[url=#]Home[/url]

[*]
[url=#]About[/url]

[*]
[url=#]Services[/url]

[*]
[url=#]Blog[/url]

[*]
[url=#]Contact[/url]

[/list]




[/i]

[list]
[*]
[url=#]Home[/url]

[*]
[url=#]About[/url]

[*]
[url=#]Services[/url]

[*]
[url=#]Blog[/url]

[*]
[url=#]Contact[/url]

[/list]








< /code>
css: < /p>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}

a {
text-decoration: none;
color: #333;
}

li {
list-style: none;
}

img {
max-width: 100%;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}

.navbar {
background-color: lightblue;
padding: 1rem 2rem;
height: 80px;
}

.navbar .logo {
width: 50px;
}

.navbar-flex {
display: flex;
justify-content: space-between;
align-items: center;
}

.navbar .main-menu-list {
display: flex;
gap: 1.5rem;
align-items: center;
}

.navbar a:hover {
color: blue;
}

/* Mobile Menu */

.navbar .mobile-menu-items {
position: absolute;
top: 80px;
bottom: 0;
left: 0;
width: 100%;
background: rgba(154, 192, 204, 0.5);
text-align: center;
transition: transform 0.3s ease;
transform: translateX(100%);
}

.navbar .mobile-menu-list {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding-top: 300px;
gap: 2rem;
font-size: 1.2rem;
}

.navbar .mobile-menu-toggle {
cursor: pointer;
}

.navbar .mobile-menu-items.active {
transform: translateX(0);
}

.navbar .mobile-menu {
display: none;
}

@media (max-width: 768px) {
.navbar .main-menu {
display: none;
}

.navbar .mobile-menu {

display: block;
}
}
< /code>
js: < /p>
document.addEventListener('DOMContentLoaded', function () {
const toggleButton = document.querySelector('.navbar .mobile-menu-toggle');
const mobileMenu = document.querySelector('.navbar .mobile-menu-items');

toggleButton.addEventListener('click', function () {
mobileMenu.classList.toggle('active');
})
})

Когда я открываю элемент осмотра в браузере (я попробовал его в Chrome и Firefox, а также в приложении BrowserStack), он переполняется, и я вижу мобильное меню, когда я не должен.

Подробнее здесь: https://stackoverflow.com/questions/796 ... from-phone