Question:
Fixed width layout in the middle of the screen. It is necessary for some blocks to make a horizontal fill on the sides to the edges of the screen. This solution with pseudo-elements causes a horizontal scroll to the width of the parent element. Tell me how to do it without scrolling.
<!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>Answer:
I think it's easier to do this:
.wrapper{
background: linear-gradient(to left,#00364f 50%,#01a4a6 50%);
}
.content{
width: 100px;
margin: 0 auto;
background-color: red;
height: 300px
}<div class="wrapper">
<div class="content">
</div>
</div>