But I don't think the size of the image should matter - the columns are constrains by the spans, the image should not be effecting the column, the columns float left and there is this empty space.

I would do this - and its much better in the long run I think to use to use the Flexbox positioning model, because you can apply it to alot of things. I did solve the issue by using the flexbox mode.

I duplicated the 2nd row. I deleted all but one column. I changed the remaining column spans to 12, and at all breakpoints - it will spread the column and the picture wide. Now put a container in the column, its hard to directly place, just put it anywhere int he column, then go to the inspect pans and find it, then put the elements in the column, image, header and paragraph, in order into the container. Give this container a useful class name. Duplicate this column 3 times.

Now, give the column a position a display of flex, instead of block. Direction row, no wrap. Now replace the images for now. For me it left the left most picture wide than the other, so in the container, in the flexbox properties, set the grow to "1" so they all grow to the same size and that should make all the containers the same width.

Now, as you do down the breakpoints, you will need to break the columns, instead of changing spans, you can change the "flex basis." The "flex basis" is the size that the flexbox model gives the element before it wraps it. So, when you want to stack containers (your former columns), give them a flex basis size, and change the position display of flex to wrap. Once three flex basis' can fit across - your get three containers across, so it will need some adjustments at different breakpoints to match what you have right now.

You could do this - in one row, in one column for ALL your current columns. Why would I do this? Because you have 8 columns which are like cards in new frameworks. At a couple breakpoints, it looks better three columns/containers wide. When this happens in a row of 4 containers, the odd container gets stretched and takes up the column width underneath the other three. You can give that container another class and change its grow to '0" and flex basis which will resize it if you want, and go to the column and change the flexbox justify to center. But now you get three containers, and one underneath it with alot of white space. If you did this with 8 container in a column, you could have three rows of three and a 4th with 2 and it will look much better than just one by itself. And if you want to chnage the order of the 8 containers, you can just give them numbers in flexbox order box.

Another reason to learn the flexbox model is that the container I describe above - can have a flexbox model of their own. You give the container a display of flex, but a direction of row, and give the paragraph inside a grow of "1" that will cause the paragraph to take up space extra space and have the container take up the height available for it when the container is shorters than others for that short paragraph.

Thanks Bill,
I'm going look into Flexbox. I'm still very new to responsive and trying to get my head around everything.
I think your correct about it not being the image, I changed them so they are all the same size and it still has the same glitch
although much better than it was.

I resized the image of the guitar lady in an image editor, and it works. The max size your images got to be displayed was 360x240. So I cropped her image to that and and used that at the max breakpoint.