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

Как оказалась — задача с ходу не решалась.

В итоге нашли такое решение:


.home #page {

max-width: 100% !important;
 width: 100%;
 overflow: hidden;
}

.home #content {
 width: 1020px;
 margin: 0 auto;
}

.home #panel-1-0-0 .fullwhite {
 margin: 0 -100%;
 padding: 0 100%;
}

Суть в том, что overflow: hidden (по сравнению с первоначальным вариантом) переносится с <body> на #page, а фиксированная ширина — с #page на #content.
Кроме #content, в #page больше ничего нет, поэтому на отображение других блоков это не влияет)

 

Этот пример нужно адаптировать под конкретную страницу.