title: Bootstrap Grid - why are my column's overlapping only on small screens?
body: <p><strong>Bootstrap 4.1</strong></p>
  
  <p>I'm trying to create a dashboard. When I bring my browser size down to a smaller view, I expect the div's to be stacking on top of each other, but they're not.I tried changing the <code>&lt;div class="container"&gt;</code> placements but that doesn't seem to change anything.</p>
  
  <p>If you run the code snippet I think it will show them stacked but overlapped - otherwise here's a screenshot of it overlapping: <a href="https://i.imgur.com/kEqVUwh.png" rel="nofollow noreferrer">Overlapping IMGUR</a></p>
  
  <p>And here's what it looks like on large and medium: <a href="https://i.imgur.com/beeiwis.png" rel="nofollow noreferrer">Not Overlapping IMGUR</a></p>
  
  <p>Is it something to do with the height? It seems like it's not respecting the 100px height that it does when it's in a larger screen width.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
      crossorigin="anonymous"&gt;
  
    &lt;title&gt;Parking Spaces&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- Space Display--&gt;  
    &lt;div style="margin-top:20px;"&gt;&lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row" style="height: 100px"&gt;
        &lt;div class="col-md-1 offset-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 11&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 10&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 9&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 8&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 7&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 6&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 5&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 4&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1 bg-dark" style="border:1px solid #333"&gt;
          &lt;small&gt;TIRE CAGE&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 2&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 1&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row" style="height: 100px"&gt;
        &lt;div class="col-md-1 offset-md-5" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 12&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 13&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 14&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 15&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 16&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 17&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 18&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row" style="height: 100px"&gt;
        &lt;div class="col-md-1 offset-md-8" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 19&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 20&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 21&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 22&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row" style="height: 100px"&gt;
        &lt;div class="col-md-1 offset-md-8" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 23&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 24&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 25&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-1" style="border:1px solid #333"&gt;
          &lt;small&gt;SPACE 26&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!-- Bay Display --&gt;
    &lt;div style="margin-top:20px;"&gt;&lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row text-center"&gt;
        &lt;div class="col-md-4"&gt;
          &lt;h3&gt;BAY 3&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;h3&gt;BAY 2&lt;/h3&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4"&gt;
          &lt;h3&gt;BAY 1&lt;/h3&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row" style="height: 150px"&gt;
        &lt;div class="col-md-4" style="border:1px solid #333"&gt;
          &lt;small&gt;SERVICE 1&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4" style="border:1px solid #333"&gt;
          &lt;small&gt;SERVICE 2&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4" style="border:1px solid #333"&gt;
          &lt;small&gt;SERVICE 3&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="container"&gt;
      &lt;div class="row" style="height: 150px"&gt;
        &lt;div class="col-md-4" style="border:1px solid #333"&gt;
          &lt;small&gt;SERVICE 4&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4" style="border:1px solid #333"&gt;
          &lt;small&gt;SERVICE 5&lt;/small&gt;
        &lt;/div&gt;
        &lt;div class="col-md-4" style="border:1px solid #333"&gt;
          &lt;small&gt;SERVICE 6&lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T"
        crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>