В мобильной версии меню бургер выходит за границы...?

Question

Илья Вишняк @ilya__bassist

Занимаюсь веб-разработкой

HTML

В мобильной версии меню бургер выходит за границы...?

Зравствуйте!
В мобильной версии сайта планирую сделать бургер,
но меню которое будет выдвигаться, вылазит за границы страницы.
Помогите плиз решить эту проблему.)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>adaptive</title>
	<link rel="stylesheet" href="css/main.css">
	<link href="https://fonts.googleapis.com/css?family=Roboto:500&display=swap" rel="stylesheet">
</head>
<body>
	<div class="wrapper">
		<!-- header -->
		<header class="header">
			<div class="container">
				<nav class="nav">
					<div class="logo"></div>
					<ul class="menu">
						<li class="menu-item"><a href="#">Home</a></li>
						<li class="menu-item"><a href="#">About</a></li>
						<li class="menu-item"><a href="#">Contact us</a></li>
						<li class="menu-item"><a href="#">Portfolio</a></li>
					</ul>
					<div class="menu__btn"><a href="#">&#8801;</a></div>
				</nav>
			</div>
		</header>
		<!-- /header -->

		<!-- main -->
		<main class="main">
			<div class="container">
				<div class="main__container">
					<div class="main__item"></div>
					<div class="main__item"></div>
					<div class="main__item"></div>
					<div class="main__item"></div>
					<div class="main__item"></div>
					<div class="main__item"></div>
				</div>
			</div>
		</main>
		<!-- /main -->

		<!-- footer -->
		<footer class="footer"></footer>
		<!-- /footer -->
	</div>
	
	<script>
	</script>
</body>
</html>

body{
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	background: #F2F2F2;
}
a{
	text-decoration: none;
	color: white;
}
.container{
	max-width: 1202px;
	margin: 0 auto;
	padding: 0 20px;
}
.wrapper{
	min-height: 100%;
	overflow: hidden;
}
/*header*/
.header{
	background: #171641;
}
.menu{
	display: flex;
	margin: 0;
}
.menu-item{
	list-style: none;
}
.menu-item a{
	font-size: 20px;
	margin-left: 40px;
	transition: 0.2s ease;
}
.menu-item a:hover{
	opacity: 0.6;
}
.nav{
	padding: 16px 0; 
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.logo{
	width: 56px;
	height: 56px;
	border: 3px solid #FFFFFF;
	border-radius: 100%;
}
.menu__btn{
	color: white;
	font-size: 40px;
	display: none;
}
/*/header*/

/*main*/
.main__container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding-bottom: 244px;
	padding-top: 38px;
}
.main__item{
	background: #C4C4C4;
	height: 286px;
	margin-bottom: 38px;
}
.main__item:first-child{
	width: 43.4276206323%;
}
.main__item:nth-child(2){
	width: 25.7903494176%;
}
.main__item:nth-child(3){
	width: 25.7903494176%;
}
.main__item:nth-child(4){
	width: 30.282861896838604%;
}
.main__item:nth-child(5){
	width: 48.58569051580699%;
}
.main__item:last-child{
	width: 15.391014975041598%;
}
/*/main*/

/*footer*/
.footer{
	background: #171641;
	height: 92px;
}
/*/footer*/

/*media*/
@media screen and (max-width: 768px){
	.menu__btn{
		display: block;
	}
	.nav{
		overflow: hidden;
	}
	.menu{
		display: block;
		width: 100%;
		height: 100%;
        background: #171641;
        position: absolute;
        left: 0;
        top: 90px;
	}
	.menu-item{
		margin-bottom: 40px;
	}
	.menu-item a{
		font-size: 25px;
		margin-left: 0;
	}
}
/*/media*/