Макет фиксированной ширины посередине экрана. Необходимо для части блоков сделать горизонтальную заливку по бокам до краев экрана. Такое решение с псевдоэлементами вызывает горизонтальный скролл на ширину родительского элемента. Подскажите как сделать без скролла.
<!doctype html>
<style>
.width { margin:0 auto; width:1300px;}
.block { padding:10px 0; width:100%; background:#97cc64; position:relative;}
.block:before, .block:after {top:0; bottom:0; content:''; background:#97cc64; position:absolute; width:100%;}
.block:before { right:100%}
.block:after { left:100%}
</style>
<div class="width">
<div class="block">
Block content
</div>
</div>
Простой
Средний
