title: Right margin not showing with horizontal scroll
body: <p>In my mobile view, I have a horizontal scroll that holds three divs (like cards).  The horizontal scroll works perfectly, however, the last div's right margin is not showing. It should show 6px.  All three divs have <code>margin-left: 6px</code> and <code>margin-right: 6px;</code></p>
  
  <p>Here's the left margin showing correctly:</p>
  
  <p><a href="https://i.stack.imgur.com/L53hC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L53hC.png" alt="enter image description here"></a></p>
  
  <p>Here's the right margin not showing at all:</p>
  
  <p><a href="https://i.stack.imgur.com/3aXSb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3aXSb.png" alt="enter image description here"></a></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-css lang-css prettyprint-override"><code>@media only screen and (max-width: 480px) {
    /* Html */
    html {
      overflow: scroll;
      overflow-x: hidden;
    }
    /* Cards */
    .mobile-card-container&gt;.row {
      overflow-x: auto;
    }
    .mobile-card-container {
      display: block;
    }
    
    .card-background {
      height: 100px;
      background-color: #ffffff;
      border-radius: 6px;
      margin-top: 16px;
      -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
      -moz-box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
      box-shadow: 0px 2px 4px 1px rgba(0, 51, 102, 0.1);
      margin-left: 6px !important;
      margin-right: 6px !important;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"&gt;
  
  &lt;html&gt;
  
  &lt;body&gt;
  
  
    &lt;!-- Simulaciones Default --&gt;
    &lt;div class="row"&gt;
      &lt;!-- Mobile Card Container --&gt;
      &lt;div class="col-12 mobile-card-container container-fluid" style="border: 1px solid;"&gt;
        &lt;div class="row flex-nowrap flex-sm-wrap" style="border: 1px solid red;"&gt;
          &lt;!-- Card 1  --&gt;
          &lt;div class="col-10 card-background simulacion mx-auto"&gt;
            Card 1
          &lt;/div&gt;
  
          &lt;!-- Card 2 --&gt;
          &lt;div class="col-10 card-background simulacion mx-auto"&gt;
            Card 2
          &lt;/div&gt;
  
          &lt;!-- Card 3 --&gt;
          &lt;div class="col-10 card-background simulacion mx-auto"&gt;
            Card 3
          &lt;/div&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;!-- /Mobile Card Container --&gt;
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>