Как сверстать этот блок?

Question

[kamisarlapsha]

Привет! У меня все элементы завернуть в <div class="container"></div> и у него есть фиксированная ширина. Но как сверстать блок, который показываю ниже, ведь его текст должен идти по сути по сетке, то есть по краям <div class="container">, как и все другие элементы. А красный блок под ним должен растягиваться вместе со страницей.
Заранее спасибо.

Если разрешение уже больше, то вот так растягивается.

Answer 1

[Dymok]

https://codepen.io/UnluckySerivelha/pen/RYQGem

Comments

[kamisarlapsha]

А если картинку вместо красного цвета ?

Answer 2

[Виталий Першин]

Как-то так

Comments

[kamisarlapsha]

Но всё равно, при растяжении немного уходит текст. Подскажите, как это можно решить ?
https://jsfiddle.net/8snpLq0c/13/

[kamisarlapsha]

Это происходит если беру не равною ширину

[Виталий Першин]

kamisarlapsha, Я не очень понимаю какого поведения вы хотите добиться, опишите более детально, какой должен быть конечный результат.

Answer 3

[theopract]

Адаптивный вариант на гридах конкретно под эту задачу: https://codepen.io/theopract/pen/MqLRvj