Всем привет! У меня есть шапка сайта, состоящая из двух блоков: навигации и небольшого контента. У контента должен быть фон, который должен растягиваться не на ширину блока, а на ширину всего экрана. Я попыталась использовать 100vw, но почему-то он уползает вправо и появляется прокрутка. Вот как это выглядит:
Вот код:
<!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);
}
Было бы здорово, если бы кто-то подсказал:)
Простой
Простой