Boxes out of control

I’m guessing this is an attempt at the picture caption as shown here.

That sounds like a bad structure for a start, the captions should be grouped with the corresponding picture. So one row of containers with an image and a caption.

What else would you expect width:100% to do? The images should have their own individual containers to fill. I think @ronpat already told you about using padding on your images.

Your container has its height defined in pixels, that is never going to be responsive, let height take care of itself.
So, How to do it right?
I did start on an demo after seeing your earlier thread, but I have been concentrating my efforts on my own projects (yes, that has to be done sometimes), so never posted anything.
Here is an incomplete example, not perfect, but something like.

Because I used vw to size the captions so they scale, it would want upper and lower stops on that in media queries giving a fixed font-size. One at about the wrappers max-width and one where you decide to stack the images.
Another thing is I had to set the max-width of the caption, this could be avoided maybe if I used display table, which I probably would if it were my own project. Check this pen for constraining captions to the image width:-

Looks like @ronpat has got in first, I’m so slow!