Как расширить фоновый цвет блока на всю ширину страницы браузера?

Question

[Judje_1337]

Есть обвёртка которая задаёт фоновый цвет и ограничивающий контейнер. И есть класс .top-line который задаёт другой фоновый цвет. Как расширить фоновый цвет top-line на всю ширину страницы браузера.

.wrapper {
  background-color: $gray;
  max-width: 1170px;
  margin: 0 auto;
}

.top-line {
  background-color: $gold;
  background-size: 100vh !important;
  display: flex;
}

<div class="wrapper">
        <header class="top-line">
                <div class="top-line__lang">
                    <p>RU</p>
                    <p>ENG</p>
                    <p>FR</p>
                </div>
                <p class="top-line__phone">8 [phone]</p>
                <p class="top-line__email">[e-mail]</p>
        </header>
</div>

Comments

[Ankhena]

1. Вынуть ваш блок с фоном из контейнера.
Центровщик использовать уже потом, внутри.

2. Задать псевдоэлемент шириной на всё окно и прибить абсолютом.

Answer 1

[Andrew E]

Если я правильно понял вопрос и ваш .wrapper только для ограничения и выравнивания, то просто поместите этот .wrapper внутрь .top-line.

https://codepen.io/efremandre/pen/ExRbpwr

Либо создать еще один блок, который будет занимать 100% ширины экрана и в него уже положить .wrapper с .top-line.

https://codepen.io/efremandre/pen/VwdrBxL