I figured it out, I was using background-image: url(); in my css for the images rather than using an img tag in my HTML. Not sure why that works but it did. Anyone know why?
Yes I did try background-position: cover; and the pictures were all aligned from the left. Oh I need to update my CodePen, I’m working out of VS Code at the moment.
Hmmm… I don’t know if I tried that or not, I did end up getting it sorted out though if you check my CodePen. I tried to center it other ways but possibly not with background-position
Now it seems you are not using them as background. As you said, you decided to put them into the HTML code. If you wanted to center the background, I think the property/value background-position: center; could work, as it’s suppose to center the background.