My buttons aren't being recognized on CSS Product Page

My Codepen

So I am trying to create a product landing page, and in my in codepen I have 4 products each with an add-cart button. The weird thing is that the bottom two add-cart buttons seem to work whenever I hover over them, but the ones on the top don’t do anything. However, when I take out flex-wrap on .products-section of my CSS all the buttons work, but it is not ordered properly. I’m guessing I don’t have some HTML or CSS formatted properly, but I can’t figure it out.

please attach the link to your pen