title: How do I prevent a div from going off the screen?
body: <p>Right now I have a div that I need to have over 100vw in width in order to get the effect I want. What I don't want is for the div to go off the right side of the screen. I want the view to stay at 100vw, no horizontal scroll bar. I have tried <code>overflow: hidden;</code> and <code>overflow-x:hidden;</code> and it is not working.</p>
  
  <p>CSS</p>
  
  <pre><code>.stripe {
      height: 500px;
      width: 150vw;
      top: 350px;
      margin-left: -30vw;
      position: absolute;
      background-color: #4775de;
      transform: rotate(6.2deg);
      z-index: -1;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div styleName='hero'&gt;
  
     &lt;div&gt;
          &lt;div styleName="stripe"/&gt;    
     &lt;/div&gt;
      &lt;div className="container" styleName="divide-container"&gt;
         &lt;div styleName="upper-wrapper" &gt;
         &lt;/div&gt;
         &lt;div styleName="lower-wrapper" &gt;
              &lt;MainButtonRow/&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>