css – How to fill with color to the left and right of the block to the edge of the screen?


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>
.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%}

<div class="width">
  <div class="block">
    	Block content


I think it's easier to do this:

      background: linear-gradient(to left,#00364f 50%,#01a4a6 50%);

  width: 100px;
  margin: 0 auto;
  background-color: red;
  height: 300px
<div class="wrapper">
  <div class="content">
Scroll to Top