Как сделать блок на всю ширину экрана при родительстком margin: auto?

Question

[Андрей Широких]

Доброго времени суток.
Есть часть кода (кривой, но не в нём суть):

https://codepen.io/blackerandrew/pen/XWKLzNQ

for-mobile родительский элемент имеет свойство margin: auto, благодаря которому я весь sheet могу разместить посередине, не мучаясь с расстояниями.
Но последний, нижний блок, который оранжевый, нужно чтобы был на всю ширину экрана, внутри будет контент, но по бокам до конца окна браузера мне нужно продолжение цвета блока. С родительским свойством скомбинировать у меня не получается. Помогите, пожалуйста.

Answer 1

[Ankhena]

Но последний, нижний блок, который оранжевый, нужно чтобы был на всю ширину экрана, внутри будет контент, но по бокам до конца окна браузера мне нужно продолжение цвета блока.

Ну так выньте его из родительского. Что мешает?

Задайте обертку на всю ширину окна и оранжевым фоном. В неё вложите контейнер с контентом, ограниченной шириной и margin auto.

Статейка с примерами

Comments

[Андрей Широких]

Тогда возникнет проблема с гибким позиционированием элементов в блоке, можно это как-то решить? :( Марджин помогал при различных разрешениям сохранять контенту вид посередине.

[Андрей Широких]

Разве что каждый элемент теперь отдельно позиционировать..( а их много

[Ankhena]

Андрей Широких, в примерах из статьи контентная область не по середине?

[Андрей Широких]

Ankhena, Ок, немного переверстаю. Попробую. Спасибо!

[Ankhena]

Андрей Широких, один класс

.container {
max-width: 400px; /*сколько вам нужно*/
margin-left: auto;
margin-right: auto;
}

паддинги по желанию.

И применяете его ко всем блокам, которые должны быть центрированы.