so where is your product images. When I look up your humangous css and html code above there are no image tags put anywhere. <img/> tag is an inline-block tag. Which means as long as it fits it will sit side by side. You may either put line breaks after each image, or need to use flex or some other css styles to align them in a different direction. Since you didn't provide any code showing how you are placing the images, I put down a sample below at least will give you the idea.
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 300px;
border: 1px solid red;
padding: 20px;
}
.container > img {
display: block;
}
.container > img:not(:first-child) {
margin-top: 5px;
}
</style>
</head>
<body>
<div class="container">
<img src="randomuser.me/api/portraits/women/46.jpg" />
<img src="randomuser.me/api/portraits/women/90.jpg" />
<img src="randomuser.me/api/portraits/women/77.jpg" />
<img src="randomuser.me/api/portraits/women/38.jpg" />
</div>
</body>
</html>