title: Absolute positioning causing horizontal scroll bars with image
body: <p>I have a situation where I have an image where I need it to be able to be "out of it's bounds"; works fine on larger screens, but causes horizontal scroll bars on smaller screens.</p>
  
  <p>I have the image set to <code>position: absolute</code>, so thought this wouldn't cause this issue?</p>
  
  <p>I have tried using <code>overflow: hidden;</code> on it's parent as well as other ancestors, but all this does is hide the overflow completely; I don't want to hide the overflow <em>visually</em>, I just want to get rid of the scroll bars.</p>
  
  <p><strong>CodePen Example:</strong> <a href="https://codepen.io/gutterboy/pen/RxeMGx" rel="nofollow noreferrer">https://codepen.io/gutterboy/pen/RxeMGx</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="home" class="site-container"&gt;
      &lt;div class="hero"&gt;
          &lt;div class="container"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="details col-xs-12 col-md-5 col-lg-5"&gt;
                      &lt;section id="about" class="intro"&gt;
                          &lt;p&gt;s esse dicamus. Hoc dixerit potius Ennius: Nimium boni est, cui nihil est mali. Quid ergo hoc loco intellegit honestum?&lt;/p&gt;
                          &lt;p&gt;Vide, quantum, inquam, fallare, Torquate. Sed fortuna fortis; Prodest, inquit, mihi eo esse animo. Ut id aliis narrare gestiant? Quare conare, quaeso. Ipse Epicurus fortasse redderet, ut Sextus Peducaeus, Sex.&lt;/p&gt;
                      &lt;/section&gt;
                  &lt;/div&gt;
                  &lt;div class="photo col-md-7 col-lg-7"&gt;
                      &lt;img src="https://i.pinimg.com/originals/9b/eb/39/9beb39ffdbc43f20bd886b88b45edd59.jpg" class="img-responsive" alt="Paint" /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> <em>(Note, uses Bootstrap 3.6 as well)</em></p>
  
  <pre><code>#home {
  
    &amp;.site-container {
      margin: 20px;
      border: 2px solid #000;
    }
  
      .hero {
  
        .details {
          padding: 15px;
        }
  
          .photo {
            position: relative;
  
              @media (min-width: 992px) {
                  min-height: 458px;
              }
  
              @media (min-width: 1199px) {
                  min-height: 553px;
              }          
  
              img {
                  display: block;
                  position: absolute;
                  top: 0;
                  left: 0;              
                  transform: translate(15%);
              }
  
          }
  
      }
  
  }
  </code></pre>
  
  <p>What can I do to achieve this?</p>