title: Adding space between flexbox items
body: <p>I'm trying to create a horizontally scrollable div with flexbox. So far, I have most of it. However, the only problem I am facing is that I'm trying to add space to my items, but for some reason, nothing seems to be working. I've tried adding margin, padding, justifying content, etc. Here's a <a href="https://jsfiddle.net/u754wrmz/" rel="noreferrer">jsfiddle</a> of what I'm trying to achieve.</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>    .grid {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        margin-bottom: 20px;
        justify-content: space-between;
      }
      
      /*Each item is one column*/
      
      .item {
        width: 50%;
      }
      
      .article-scroll-mobile {
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        flex-wrap: nowrap;
        text-align: center;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /*For iOS smooth scroll effect*/
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="grid article-scroll-mobile"&gt;
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/howto/img_fjords.jpg"&gt;
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/howto/img_fjords.jpg"&gt;
      
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/howto/img_fjords.jpg"&gt;
      
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/howto/img_fjords.jpg"&gt;
      
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/howto/img_fjords.jpg"&gt;
      
        &lt;/div&gt;
        &lt;div class="item"&gt;
          &lt;img src="https://www.w3schools.com/howto/img_fjords.jpg"&gt;
      
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>