Creating spaces between div card and align them in one direction not overlaping

Question

I have 3 div cards they seem to overlap and want them to align right maybe using margin. I need some help with my styling, currently now they overlap and its not good for user experience. I have other two they do not overlap to each other, they should belong to a specific container in a row. How do i achieve this as per my current logic?

// css styles
img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px; /* add margin to create space between images */
}

@media (min-width: 768px) {
  picture {
    width: 100%;
    height: 100%;
  }
}

// html code

         <!--Customer service icon-->
<a href="category-full.html">
  <div class="card-container">
    <div class="card">
      <div class="card-body">
        <div class="row flex-wrap">
          <div class="col-12">
            <img src="img/eShop-Images/Delivery_Tracking.png" style="width: 56px;">
            <h3 class="mb-0">Delivery &amp; Tracking</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

<!--Return image icon-->
<a href="category-full.html">
  <div class="card-container">
    <div class="card">
      <div class="card-body">
        <div class="row flex-wrap">
          <div class="col-12">
            <img src="img/eShop-Images/Returns.png" style="width: 56px;"> 
            <h3 class="mb-0">Returns</h3> 
          </div>
        </div>
      </div>
    </div>
  </div>
</a>

<!--Delivery post icon -->
<a href="category.html">
  <div class="card-container">
    <div class="card">
      <div class="card-body">
        <div class="row flex-wrap">
          <div class="col-12">
            <img src="img/eShop-Images/Loyalty_Cards (2).png" style="width: 56px;">
            <h3 class="mb-0">Loyalty Cards</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</a>