как заставить прижаться кнопку гамбургера к правому краю? я видимо где-то накосячил, раз он никак нормально не хочет прижатьсяю
body {
font-family: 'Montserrat', sans-serif;
}
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
header {
background-color: #EEEEEE;
padding: 22px 0px;
}
.header-container {
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.header-container a {
color: black;
font-size: 23px;
padding: 20px 6px;
margin-right: 63px;
}
.header-container .nav_link:hover {
background-color: #FFFF66;
}
.logo {
margin-left: 50px;
}
nav {
display: flex;
/* justify-content: center;
align-items: center; */
}
@media screen and (max-width: 650px) {
.nav-menu{
display: none;
}
}
@media screen and (min-width: 650px) {
.menu-btn {
display: none;
}
}
//создаём гамбургер
.menu-btn {
}
.btn {
display: block;
width: 50px;
height: 25px;
background: #223;
border-radius: 50%;
position: relative;
}
.btn span,
.btn span::before,
.btn span::after {
position: absolute;
top: 50%; margin-top: -1px;
left: 50%; margin-left: -15px;
width: 30px;
height: 2px;
background: white;
}
.btn span::before,
.btn span::after {
content: "";
transition: 0.2s;
}
.btn span::before {
transform: translateY(-7px);
}
.btn span::after {
transform: translateY(7px);
}
.btn_active span {
height: 0;
}
.btn_active span::before {
transform: rotate(45deg);
}
.btn_active span::after {
transform: rotate(-45deg);
}
.nav-menu_active {
display: flex;
width: 50px;
height: 500px;
flex-wrap: wrap;
position: absolute;
}
.proverka_one {
position: absolute;
margin-left: 50%;
width: 300px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta charset="utf-8">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<header>
<div class="header-container">
<div class="logo">
<img src="logo.png" alt="logo" width="100px" height="100px">
</div>
<div class="menu-btn">
<a class="btn" href="#"><span></span></a>
</div>
<div class="proverka">
<nav class="nav-menu">
<a class="nav_link"href="#">Блог</a>
<a class="nav_link"href="#">О нас</a>
<a class="nav_link"href="#">Главная</a>
<a class="nav_link"href="#">Контакты</a>
</div>
</nav>
</div>
</header>
<script type="text/javascript">
$('.btn').on('click', function(e) {
e.preventDefault;
$(this).toggleClass('btn_active');
$('.nav-menu').toggleClass('nav-menu_active');
$('.proverka').toggleClass('proverka_one')
});
</script>
</body>
</html>