Alignment in collection grid slightly off

I am trying to achieve a grid of perfectly aligned dynamic items within a collection wrapper that displays in 2 columns with 1 pt rules around them, and the number of items will simply wrap into rows. So if there are 6 items, there will be 2 columns of 3 rows. I have set a rule at the bottom and right side of the item so when stacked, it forms a complete rule around them. I also added a rule on the top and left side of the collection wrapper to complete the ‘box’ on the top/left edges.

The problem is the first (top) row. There’s a single pixel either to the right or left (depending on how I style the collection item), but then the subsequent rows are aligned properly.

See the ‘Upcoming Events’ section on this page:
http://kbc-website.webflow.io/youth

You can see that the second row of items is shifted one pixel to the left and the rules don’t align properly. No matter what I do there’s a 1 pixel discrepancy between the top row and subsequent rows. How do I get all the collection items to align properly?


Here is my site Read-Only: https://preview.webflow.com/preview/kbc-website?utm_source=kbc-website&preview=ee631eac59bebf7054145c21d50f3a6b