@arishaYako_14

Почему я задаю ширину фона 100vw, но он смещается вправо и появляется скролл?

Всем привет! У меня есть шапка сайта, состоящая из двух блоков: навигации и небольшого контента. У контента должен быть фон, который должен растягиваться не на ширину блока, а на ширину всего экрана. Я попыталась использовать 100vw, но почему-то он уползает вправо и появляется прокрутка. Вот как это выглядит:
5f17771d737a4292033439.jpeg

Вот код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../style.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <title>Contacts</title>
</head>

<body>
    <div class="top contacts_top">
        <div class="container content_box">
            <ul class="header">
                <li><a href="../index.html"><img class="logo" src="../img/logo.png" alt="logo"></a></li>
                <li><a href="./contacts.html"><img class="adress-book" src="../img/address-book-solid 1.png"
                            alt="adress-book"></a>
                </li>
            </ul>
            <div class="contacts top-content">
                <h1 class="contacts top-head">Contact Us</h1>
                <p class="contacts contacts-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</body>

</html>


CSS:
.contacts_top{
    background: #E5E5E5;
}

.top-content{
    background-image: url(./img/contacts-top.png);
    background-repeat:no-repeat;
    width: 100vw;
    margin-top: 85px;
    min-height: 250px;
}
.contacts{
    font-family: Roboto;
    font-weight: 500;
    font-size: 44px;
    line-height: 74px;
    text-align: center;
    letter-spacing: 0.04em;
    color: #FFFFFF;
}

.contacts-txt{
    max-width: 780px;
    margin: 0 auto;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.6);
}


Было бы здорово, если бы кто-то подсказал:)
  • Вопрос задан
  • 3410 просмотров
Пригласить эксперта
Ответы на вопрос 3
@ArtJH
body{
overflow-x: hidden;
}
Ответ написан
Комментировать
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Блоки занимают всю ширину родителя, им вообще не нужно задавать width в данной ситуации.
Вот всё, что нужно: https://jsfiddle.net/zras8k79/

А 100vw не учитывает скролл, поэтому получается горизонтальный.
Ответ написан
@DoMa_y_KoTa
Life is too short to remove USB safely..
Ну, во первых можно сделать так:
* {
margin: 0;
padding: 0;
}
body {
max-width:100%;
}

Во вторых проверьте все отступы у родителя. Сделайте ему тоже ширину на всю страницу.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы