title: Bootstrap 3.3.7 "row" causing horizontal scroll bar
body: <p>Ok ok, I know.  This question has been asked a lot.  But, so far, I have not found a working solution.  I boiled my page down to nothing but this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
          stuff
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And there is still a horizontal scroll bar.  In dev tools, I can find the <code>row</code>:</p>
  
  <pre><code>.row {
      margin-right: -15px;
      margin-left: -15px;
  }
  </code></pre>
  
  <p>And if I un-click <code>margin-right: -15px;</code> then the problem goes away.  But, on my actual page (with all of the content) this creates another problem.  The page needs to have zero margins, but it now was a 15px margin on the right.</p>
  
  <p>One of the answers <a href="https://stackoverflow.com/questions/18969051/bootstrap-3-why-is-row-class-is-wider-than-its-container">here</a> sad to wrap <code>row</code> with <code>container-fluid</code>.  Another said to wrap it in <code>container</code>.  Both of these did make the scroll bar go away, but they also give the page side margins, which I can't have.</p>
  
  <p>I've found <a href="https://github.com/twbs/bootstrap/issues/8959" rel="noreferrer">threads</a> discussing this as far back as 2013.  Is this really not fixed yet?  </p>
  
  <p>What do I need to do?</p>
  
  <p>Also: Fiddle</p>
  
  <p><a href="https://jsfiddle.net/oLx4g8e3/1/" rel="noreferrer">https://jsfiddle.net/oLx4g8e3/1/</a></p>