Возникла проблема. При открытии теста на адаптивность и выборе маленьких экранов, все блоки начинают примыкать к левому краю. Также и с footer, логотип заезжает за экран и весь блок уезжает в лево. Код прилагается https://codepen.io/ivkozelko/pen/PopgoaG
Благодарю заранее.
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Roboto:wght@100;300;400;500;700&display=swap');
body{
color: #444444;
padding: 0;
margin: 0;
font-family: 'Lato', sans-serif;
}
a{
text-decoration: none;
}
li{
list-style-type: none;
}
.header-menu{
align-items: center;
display: flex;
justify-content: space-between;
}
.header-menu a{
text-decoration: none;
color: #989898;
}
.header-menu a:hover{
color: #000;
transition: 0.3s;
}
.header-menu li{
flex-grow: wrap;
list-style-type: none;
display: inline;
}
.header-menu_list li:not(:last-child){
margin-right: 60px;
}
.header-menu ul{
display: inline;
}
.header-menu_list{
display: flex;
}
.header-menu_shopping-cart img{
width: 30px;
height: 30px;
float: right;
}
.menu{
display: none;
}
footer{
max-width: 100%;
background-color: #F0F0F0;
}
.footer-list{
display: flex;
justify-content: space-around;
}
.footer-column li:first-child{
font-weight: bold;
margin-bottom: 10px;
font-size: 20px;
}
.footer-column li:not(:last-child){
margin-bottom: 13px;
}
.footer-column a{
color: #1c1c1c;
}
@media (max-width: 950px){
.header-menu_list{
display: none;
}
.menu{
cursor: pointer;
display: block;
}
.menu img{
width: 20px;
height: 20px;
}
.header-menu{
justify-content: space-betweenx;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>magick-box</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="header-menu">
<div class="menu"><img src="img/menu.png" alt=""></div>
<div class="logo">
<h1>logotype</h1>
</div>
<div class="header-menu_list">
<div class="burger">
<ul class="header-menu_list">
<li class="header-menu_list_item"><a href="">Главная</a></li>
<li class="header-menu_list_item"><a href="">Каталог</a></li>
<li class="header-menu_list_item"><a href="">Оплата и доставка</a></li>
<li class="header-menu_list_item"><a href="">Контакты</a></li>
</ul>
</div>
</div>
<div class="header-menu_shopping-cart">
<img src="img/shopping-cart.png" alt="">
</div>
</div>
</header>
<footer>
<div class="container">
<div class="footer-list">
<div class="first-column"><h1>logotype</h1></div>
<ul class="footer-column">
<li>Сервис</li>
<li><a href="#">О нас</a></li>
<li><a href="#">Доставка</a></li>
<li><a href="#">Отзывы</a></li>
<li><a href="#">Оплата</a></li>
<li><a href="#">Контакты</a></li>
<li><a href="#">Возврат</a></li>
</ul>
<ul class="footer-column">
<li>Каталог</li>
<li><a href="#">Подарочные наборы</a></li>
<li><a href="#">Конструктор</a></li>
<li><a href="#">Скидки</a></li>
</ul>
<ul class="footer-column">
<li>Дополнительная информация</li>
<li><a href="#">Реквизиты</a></li>
<li><a href="#">Публичный договор</a></li>
<li><a href="#">Реквизиты</a></li>
<li><a href="#">Поставщики</a></li>
</ul>
</div>
</div>
</footer>
</body>
<script src="scripts/script.js"></script>
</html>