0

Возникла проблема. При открытии теста на адаптивность и выборе маленьких экранов, все блоки начинают примыкать к левому краю. Также и с 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>

1 ответ 1

0

Может банально увеличить тег отвечающий за задний фон на 100%?

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.