Dzień dobry
Przy próbie wykonania hamburger menu natknąłem się na problem z wyjeżdżającym aside. Kiedy aside jest schowany to pojawiają się paski przewijania, co wskazuje, że strona jest rozciągnięta .Natomiast kiedy aside jest widoczny to paski znikają, gdzie popełniłem błąd
Problem można zobaczyć pod tym linkiem
http://arkomadi.ayz.pl/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="burger">
</div>
<aside>
</aside>
</div>
</body>
</html>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header {
width: 100%;
height: 150px;
background-color: gray;
}
aside {
position: absolute;
top: 150px;
right: 0px;
width: 300px;
height: 100vh;
z-index: 6;
background-color: black;
transform: translateX(300px);
transition: transform 0.5s;
}
.burger {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
padding: 10px;
background-color: greenyellow;
}
.burger:hover {
cursor: pointer;
}
.burger:hover+aside {
transform: translateX(0px);
}