A Bootstrap 3 column needs a row, and a row needs a container

The grid is three classes that only work as a chain. .container supplies 15px of padding, .row cancels it with a -15px margin on each side, and .col-* puts it back as the gutter. Drop any one of the three and the arithmetic stops balancing, in a way that reads as a browser bug rather than a missing element.

<div class="container">          <!-- 15px padding -->
  <div class="row">              <!-- -15px margin: cancels it -->
    <div class="col-md-8">…</div>   <!-- 15px padding: the gutter -->
    <div class="col-md-4">…</div>
  </div>
</div>

<!-- no container: the negative margins have nothing to cancel, so the
     row is 30px wider than the body and the page scrolls sideways -->
<div class="row">
  <div class="col-md-12">…</div>
</div>

A .row without a container is the horizontal scrollbar that shows up on phones and nowhere else, because 30px of negative margin overflows a body with no padding to absorb it. A .col-* without a row is the opposite symptom: the gutter is never cancelled, so content sits 15px in from where the design puts it, on one side of the page only. .container-fluid is the full-width form of the same thing and satisfies the rule; a plain div with padding of your own does not, unless it happens to be exactly 15px. The rule is also why a column may only contain more columns if a fresh .row sits between them — same cancellation, one level down.