Создание полной ширины (100%) контейнер внутри фиксированной ширины контейнера

Данный урок расскажет как сделать блок на всю ширину экрана, если у нас есть сайт с дивом фикксированной ширины.

Шаг 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/