title: Text overlaying hero image in Bootstrap 3 overflowing container
body: <p>This seems so unbelievably silly, but I've tried everything and can't seem to get this fixed.</p>
  
  <p>Using Bootstrap 3, fully updated, I am trying to overlay text on my responsive hero image that is set inside a container. Code here: <a href="http://jsfiddle.net/megkadams/62g7s/1/" rel="nofollow">http://jsfiddle.net/megkadams/62g7s/1/</a></p>
  
  <p>The row of text is exceeding the width of the container and I can't figure out why. I have almost the exact same code on another site, except that the hero image is full-screen and lays outside of the container, and it works just fine.</p>
  
  <p>Any help would be so great.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row" id="landing-header"&gt;
          &lt;div class="col-lg-12"&gt;
              &lt;img src="../assets/img/landing-img.png" alt="Photo description" class="landing-img" /&gt;
              &lt;div class="landing-header-content"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-sm-4"&gt;
                          &lt;h1&gt;Landing Page Title&lt;/h1&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-8"&gt;
                          &lt;p&gt;Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row" id="page-body"&gt;
          &lt;div class="col-sm-12"&gt;
              &lt;h2&gt;The rest of my body&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- Close row --&gt;
  &lt;/div&gt; &lt;!-- Close container --&gt;
  </code></pre>