The overlap was caused by the 20px margin you added as already mentioned by Technobear and would correct the overlap issue.
The gap at the bottom of the image when scrolled was because you set a height on the containing div that was more than twice the height of the image.
If you want a fully responsive container using foreground images then you will need to use object-fit or an object-fit method (which I think we have mentioned before). If you are prepared to use background images then it will be easier but I see these images as content so really should be in the html.
I'm only just back now so give me an hour or so and I will knock up a responsive version of my codepen. The original codepen didn't need to be responsive because it would fit on all screens as it was. However if you need it inside a percentage container then you will need to change things around a bit. I would not have placed them in a percentage container because they soon get too small and I would have used a construct that wrapped the images to a new line when needed.