title: Bootstrap 4 horizontal scroller div
body: <p>I got this working for Bootstrap 3 but the same code won't work in Bootstrap 4.</p>
  
  <p>Basically, I'm trying to create a horizontal scroll for DIV and here's a working JSFIDDLE for Bootstrap 3 (which I don't want): <a href="https://jsfiddle.net/glebkema/zaazhp2d/" rel="nofollow noreferrer">DEMO</a></p>
  
  <p>The same code for Bootstrap 4 isn't working though! Here's the JSFiddle for Bootstrap 4: <a href="https://jsfiddle.net/6kvw2q5h/" rel="nofollow noreferrer"><strong>https://jsfiddle.net/6kvw2q5h/</strong></a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="live__scroll"&gt;
    &lt;div class="row text-center"&gt;
      &lt;div class="col-8 live__scroll--box"&gt;1&lt;/div&gt;
      &lt;div class="col-8 live__scroll--box"&gt;1&lt;/div&gt;
      &lt;div class="col-8 live__scroll--box"&gt;1&lt;/div&gt;
      &lt;div class="col-8 live__scroll--box"&gt;1&lt;/div&gt;
      &lt;div class="col-8 live__scroll--box"&gt;1&lt;/div&gt;
      &lt;div class="col-8 live__scroll--box"&gt;1&lt;/div&gt;
      &lt;div class="col-8 live__scroll--box"&gt;1&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.live__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }
  .live__scroll .live__scroll--box {
    display: inline-block;
    float: none;
    padding: 15px;
    border: 1px solid red;
  }
  </code></pre>
  
  <p>What am I doing wrong? I'm at wits end.</p>