I’m currently facing some issues with my website, which is built on Shopify and includes a customized section. I’m not entirely sure what I’ve done wrong in my code, but there are three main problems:

• The Klarna and PayPal logos are not aligned with each other, and the space between the two logos and the headline is quite large.
• I want to align the height of the cards to match the tallest card in the row. However, as you can see in the picture, there’s still a slight difference in height between the two cards. This issue shouldn’t be caused by the content, as even after copying and pasting the same content into the two different divs, the problem persists.
• The cards have margins around them to create space between them. However, this also results in margins on the outer sides, causing the boxes to not align with the other sections.

I would greatly appreciate your support.

Best regards,
Allen

<!-- Second Row Section -->
<style>
  .second-row-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0px 0;
    align-items: stretch;
  }
  .second-row-cards .card {
    text-align: left;
    padding: 0px 10px 10px 10px;
    width: 48%;
    margin: 1%;
    background-color: #F6F6F6;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  }
  .second-row-cards .card-header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 5px;
  }
  .second-row-cards .icons-row {
    display: flex;
    align-items: center; /* Zentriert die Icons vertikal auf einer Linie */
width:100%;
    margin-bottom: 7px;
  }
  .second-row-cards img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
  .second-row-cards .caption-2 {
    font-weight: 450;
    font-size: 12px;
    color: #333;
    margin-bottom: 5px;
  }
  .second-row-cards .body-4 {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
  }
</style>


<div class="second-row-cards">
  <div class="card">
    <div class="card-header">
      <div class="icons-row">
        <img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_Klarna_813785f1-282e-4f5e-840b-745585bc4815.svg?v=1723572724" alt="Bezahlung über Klarna">
        <img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_PayPal.svg?v=1723551376" alt="Bezahlung über PayPal">
      </div>
      <p class="caption-2">Bequem auf Rechnung</p>
    </div>
    <p class="body-4">Bezahle bequem auf Rechnung mit PayPal oder Klarna</p>
  </div>
  <div class="card">
    <div class="card-header">
      <div class="icons-row">
        <img src="https://cdn.shopify.com/s/files/1/0674/1740/7804/files/Icon_PLEON_Calendar_filled.svg?v=1723570827" alt="Rückgaberecht">
      </div>
      <p class="caption-2">30 Tage Rückgaberecht</p>
    </div>
    <p class="body-4">Risikofrei dank Zufriedenheitsgarantie</p>
  </div>
</div>