Any thoughts on why this <div> three box is not aligned?

I’m trying to do 2 rows of three pictures. But on both rows, the first img is slightly above the others. Any idea why or what i could do to prevent it? code below

this is my code injection (header) and I’m using <div class="three-box"> in an HTML block

<style>
  .three-box {
    grid-column: wide-start/wide-end;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  @media screen and (max-width:767px) {
    .three-box {
       grid-template-columns: 1fr; }
  }
  
  .three-box .kg-product-card-container {
    height: 100%
  }
</style>

There’s some first element code that’s changing the margins or padding. Inspect the first element.

I’m inspecting it but, to me, it’s a massive wall of text and I don’t understand how to parse it for what I need.

Link it, if it’s live (or at least preview-able) somewhere?

I can make it live since no one knows where to find it

ty for taking a look

.three-box .kg-image-card {
margin-top: 0px!important }
1 Like

You are THE BEST! ty

1 Like