fala galerinha do mal algueem me da um help sobre overflow hidden fiz um menu hamburguer porém quando coloca modo mobile ele fica com a rolagem lateral e não consigo tirar... deve ser simples pois é somente a ul class="lista2" que está vazando
HTML
<body>
<nav class="container2">
<input id="checkbox2" type="checkbox" class="menu-checkbox2">
<label for="checkbox2" class="menu-label2">
<div class="menu-lines2">
<span></span>
<span></span>
<span></span>
</div>
</label>
<ul class="lista2">
<li><a href="">Home</a></li>
<li><a href="">Contato</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Configurações</a></li>
<li><a href="">Saber mais</a></li>
<li><a href="">Localização</a></li>
</ul>
</nav>
</body>CSS
body {
background: rgb(49, 49, 49);
overflow-x: hidden;
}
.menu-lines2 {
position: absolute;
z-index: 999;
width: 35px;
height: 35px;
cursor: pointer;
/*posicionamento do icone menu hamburguer*/
right: 2em;
top: 2em;
}
.lista2 {
/*mudar font-size se precisar*/
font-size: 18px;
top: 0;
right: -260px;
min-height: 100vh;
height: auto;
width: auto;
transition: 1s;
background: rgba(110, 110, 110, 0.5);
position: absolute;
line-height: 40px;
padding: 100px 2em 1em 4em;
border-left: 3px solid rgb(70, 126, 46);
border-bottom: 3px solid rgb(70, 126, 46);
list-style: none;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: end;
overflow-x: hidden;
}
.lista2 a {
/*mudar color se precisar*/
color: rgb(226, 226, 226);
text-decoration: none;
}
span {
display: block;
width: 35px;
height: 3px;
margin-bottom: 10px;
border-radius: 3px;
transition: .5s;
/*cor do menu hamburguer*/
background: #cdcdcd;
}
a:hover {
color: rgb(189, 125, 125);
}
.menu-checkbox2 {
display: none;
}
.menu-checkbox2:checked~.lista2 {
opacity: 100%;
right: 0;
}
.menu-checkbox2:checked~.menu-label2 .menu-lines2 span:nth-child(1) {
transform-origin: 100% 0%;
transform: rotate(-405deg) scaleX(1.1);
}
.menu-checkbox2:checked~.menu-label2 .menu-lines2 span:nth-child(2) {
opacity: 0;
}
.menu-checkbox2:checked~.menu-label2 .menu-lines2 span:nth-child(3) {
transform-origin: 100% 100%;
transform: rotate(405deg) scaleX(1.1);
}
* {
margin: 0;
}
