Overflow-x: скрыто, не препятствует горизонтальной прокрутке в реализации гамбургер-меню ⇐ CSS

[Anonymous]

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

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
overflow-x:hidden;
}

@media(max-width:768px){
body {
width: 100%;
overflow-x:hidden;
}

.nav-bar {
height: 50px;
background-color: #C80036;
}

.ham-bar{
background-color: #C80036;
height: auto;
width: 80%;
margin-left: 20%;
padding: 20px;
position: absolute;
right: -400px;
}

.ham-bar ul{
display: flex;
flex-direction: column;
align-items: center;
gap: 80px;
}

.ham-bar li{
list-style: none;
}

.ham-bar a{
text-decoration: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
color: aliceblue;
font-size: 18px;
}

.bar{
display: block;
background-color: white;
height: 3px;
width: 25px;
position: relative;
top: 40%;
left: 85%;
}

.bar:nth-child(1){
top: 30%;
}

.bar:nth-child(3){
top: 50%;
}
}

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

Document
[*]









[list]

[url=about]About[/url]

[*]
[url=skills]Skills[/url]

[*]
[url=projects]Projects[/url]

[*]
[url=contact]Contact[/url]

[/list]

Описание: проблема с переполнением
Я впервые реализую меню-гамбургер в своем веб-проекте, используя HTML, CSS и немного JavaScript. Само меню работает корректно: при срабатывании оно выдвигается справа. Однако у меня возникла проблема с горизонтальной прокруткой.
Я использовал «overflow -x:hidden», чтобы остановить такое поведение прокрутки. Но это не работает. Страница по-прежнему доступна для прокрутки.

Подробнее здесь: https://stackoverflow.com/questions/786 ... nu-impleme