Images displayed too big

Hi all,

I could use some help with this. I’m testing my shop https://randomredmedia.com/ at the moment and cannot get the single product pages to look the same. The product pages for the purple and the yellow image are fine and what I want. Everything on the product pages for the other two images is bigger and looks terrible. I’m not very CSS-savvey so this is somewhat like finding a needle in a haystack for me. I can see that the images that are displayed correctly are not spread across the whole page like on the other two pages. I compared all the pages using inspect element, but cannot find the issue. I added this code

@media only screen and (min-width: 768px) {
    div.home-intro ul.featured-products li:nth-child(4n), div.home-intro ul.featured-products li.fourth {
        width: 24%;
        margin-top: -3%;
    }
}

yesterday (which was given to me) to reduce the size of the red image on the homepage a little as it was much bigger than the other 3. I checked if this is causing the issue by removing the code, but the issue persists. Can anyone tell me what the problem is, please?

Thank you very much!

K.