Родительский блок не растягивается на весь экран
Попытаюсь максимально информативно и понятно изъяснить.
Есть, значит, первая часть сайта, где нужно фото на заднем плане.
Когда пишешь backround-image(а так же background-size: 100%; background-repeat: no-repeat; background-position: top center;) в body, то все норм, но не устраивает то, что при попытке создать новую часть сайта, элементы с новой части идут сразу после контента первой.
Когда пытаюсь написать background не в body, а в первый блок, то она ровняется по краям контента.
Дело в том, что с другими блоками такая же фигня.
Как сделать, чтобы блок выводился на весь экран и оставался гибким (не в пикселях).
ОГРОМНОЕ СПАСИБО!
Вот как все должно выглядить:
Вот как у меня:
html {
scroll-behavior: smooth;
}
body{
font-family: 'Lato', sans-serif;
color: #222222;
}
/* Первый блок */
.container{
background-image: url(../img/main-bg.jpg);
backgound-size: 100%;
background-position: top center;
background-repeat: no-repeat;
}
.container_content{
max-width: 1140px;
margin: auto;
}
/* Header */
.header{
display: flex;
align-items: center;
justify-content: space-between;
max-height: 57px;
margin-top: 43px;
}
.logo{
font-family: 'Merriweather', sans-serif;
font-style: normal;
font-weight: 900;
font-size: 36px;
line-height: 50px;
color: #005FA3;
display: flex;
align-items: center;
}
.logo::before{
content: '';
width: 40px;
height: 40px;
background-image: url(../img/logo.svg);
background-repeat: no-repeat;
background-size: 100%;
margin-right: 30px;
}
.top-line_info{
display: flex;
align-items: center;
margin-bottom: 22px;
}
.top-line_info-content{
font-family: 'Lato', sans-serif;
font-size: 13px;
line-height: 17px;
color: white;
text-decoration: none;
}
.top-line_info-content:not(:last-child){
margin-right: 40px;
}
.top-line_info-content:hover{
text-decoration: underline;
}
.top-line_menu-content{
font-family: 'Lato', sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 17px;
text-decoration: none;
text-transform: uppercase;
color: white;
}
.top-line_menu-content:hover{
color: #005FA3;
transition: 0.15s;
}
.top-line_menu-content:not(:last-child){
margin-right: 68px;
}
.img-before-top-line_info-content{
margin-right: 15px;
}
/* Первый блок основа */
main{
margin-bottom: 13.5%;
}
.title{
font-family: 'Merriweather', sans-serif;
font-style: normal;
font-weight: bold;
font-size: 48px;
line-height: 66px;
color: white;
margin-top: 130px;
margin-bottom: 100px;
}
.container1_button{
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 25px;
color: white;
text-decoration: none;
padding: 19px 60px 19px 60px;
background-color: #005FA3;
}
.slider{
margin-top: 18%;
display: flex;
align-items: center;
justify-content: space-between;
}
.slider-component{
text-decoration: none;
}
.slider-component:not(:last-child){
margin-right: 40px;
}
.slider-button{
text-decoration: none;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BuhOne</title>
<link
href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900|Merriweather:900&display=swap&subset=cyrillic"
rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="container_content">
<header class="header">
<div class="logo">BuhOne</div>
<div class="top-line">
<div class="info-and-menu">
<nav class="top-line_info">
<img src="img/phone.svg" alt="" class="img-before-top-line_info-content">
<a href="tel: +71112223344" class="top-line_info-content">8 (111) 222-33-44</a>
<img src="img/clock.svg" alt="" class="img-before-top-line_info-content">
<a href="#" class="top-line_info-content">Пн-Пт 10:00-18:00</a>
<img src="img/email.svg" alt="" class="img-before-top-line_info-content">
<a href="mailto: [email protected]" class="top-line_info-content">[email protected]</a>
<img src="img/location.svg" alt="" class="img-before-top-line_info-content">
<a href="https://goo.gl/maps/RSJNhwPEFN22Sgxd7" target="_blank"
class="top-line_info-content">Невский пр. 130</a>
</nav>
<nav class="top-line_menu">
<a href="#" class="top-line_menu-content">главная</a>
<a href="#" class="top-line_menu-content">услуги</a>
<a href="#" class="top-line_menu-content">кейсы</a>
<a href="#" class="top-line_menu-content">о компании</a>
<a href="#" class="top-line_menu-content">контакты</a>
</nav>
</div>
</div>
</header>
<main>
<h1 class="title">Бухгалтерские услуги<br>
в Санкт-Петербурге</h1>
<a href="#" class="container1_button">Читать подробнее</a>
<div class="slider">
<div class="slider-components">
<a href="#" class="slider-component">
<img src="img/slider-active.svg" alt="">
</a>
<a href="#" class="slider-component">
<img src="img/slider.svg" alt="">
</a>
<a href="#" class="slider-component">
<img src="img/slider.svg" alt="">
</a>
<a href="#" class="slider-component">
<img src="img/slider.svg" alt="">
</a>
</div>
<div class="slider-buttons">
<a href="#" class="slider-button">
<img src="img/slider-button-prev.svg" alt="">
</a>
<a href="#" class="slider-button">
<img src="img/slider-button-next.svg" alt="">
</a>
</div>
</div>
</main>
</div>
</div>