Circle Pics with CSS border-radius, Help please!


I am working on my first project webpage for the lessons and I am finding changing a square photo into a circle is not as easy as it was in the lessons. The first photo on my page is not a square, the rest of them have been cropped to be made squares, to make it easy for them to be circles. However, perhaps because of adding the col-*-n tags it causes them to stretch differently? I am not sure, this problem did not occur in the lessons as I was able to put it in a row of a certain col width size and it remained a circle with its border attached. However, I am not finding that to work successfully here.

If you look at the images in the middle, such as of the cake, the border isn’t even properly on the image?

Please help!

My CodePen page is;

Thank you,

1st you don’t need col- classes on img tags
2nd you need square images to be a perfect circle when you apply the border radius

Okay thank you, yes it seems the col- class on the img tags is the problem, not sure why I did that.

Thank you!