Adding space between flexbox items

Question

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 of what I'm trying to achieve.

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

 <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>

Answer 1

There is column-gap to adjust row gaps between elements.

.form-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  column-gap: 0.875rem;
}