Bootstrap grid nesting needs a fresh row

The grid works by putting negative margins on .row to cancel the padding on .col-*. Nesting columns directly inside a column skips that cancellation, and the inner content ends up indented by exactly one gutter — a misalignment that looks like a rounding error.

<div class="col-md-8">
  <div class="row">                <!-- required -->
    <div class="col-md-6">…</div>
    <div class="col-md-6">…</div>
  </div>
</div>

The nested row’s columns are twelfths of the parent column, not of the page, so the two col-md-6 above are half of eight columns each. The other half of the rule is that a .row must always be inside a .container or .container-fluid; putting one directly in the body leaves the negative margins uncancelled and produces a horizontal scrollbar.