title: How to make a background color stretch to left and right of viewport in Safari Browsers
body: <p>I have a site at <a href="http://bit.ly/1gH5Nqw" rel="nofollow noreferrer">http://bit.ly/1gH5Nqw</a> that has a white background behind a content block in the middle of the page. The white background stretches to the left and right margin of the viewport in all browsers except Safari. Does anyone know why or how to correct the issue?</p>
  
  <p>Here's my CSS:</p>
  
  <pre><code>div#maincontentcontainer div#home-services-block,
  div#maincontentcontainer div#inner-page-content {
      background-color: #fff; /* trying to get background to appear in Safari browser */
      margin-top: 60px;
      position: relative; /* to get the container to extend to the screen/viewport margins */
      }
      div#maincontentcontainer div#home-services-block:after,
      div#maincontentcontainer div#inner-page-content:after { /* to get the container to extend to the screen/viewport margins (http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen) */
          content: "";
          position: absolute;
          height: 100%;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100vw;
          background-color: #fff; /* changed `background:` to `background-color:` to see if white background would appear in Safari browser -- it did not */
          z-index: -1;
      }
  </code></pre>
  
  <p><strong>Works in all modern browsers except Safari:</strong>
  <a href="https://i.stack.imgur.com/Gym4G.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gym4G.jpg" alt="enter image description here"></a></p>
  
  <p><strong>Does not work in Safari:</strong>
  <a href="https://i.stack.imgur.com/UKt2i.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UKt2i.jpg" alt="enter image description here"></a></p>