Данный урок расскажет как сделать блок на всю ширину экрана, если у нас есть сайт с дивом фикксированной ширины.
Шаг 1.
[php]
html, body {
overflow-x: hidden;
}
[/php]
Шаг 2.
[php]
<div class="container">
<div class="full-width">
контент
</div>
</div>
[/php]
[php]
.container {
position: relative;
max-width: 940px;
width: 100%;
margin: 0px auto;
padding-right: 15px;
padding-left: 15px;
}
.full-width {
padding: 40px 0;
background: #f8f8f8;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
[/php]
Существуют и другие решения, примеры здесь – https://css-tricks.com/full-browser-width-bars/
