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 [jsfiddle](https://jsfiddle.net/u754wrmz/) of what I'm trying to achieve.

```css
    .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*/
    }
```

```html
 <div class="grid article-scroll-mobile">
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">
      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">

      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">

      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">

      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">

      </div>
      <div class="item">
        <img src="https://www.w3schools.com/howto/img_fjords.jpg">

      </div>
    </div>
```