Media query not working – IMG being pushed out of line

[smedz28]

I have been designing a personal site for my love of photography, but the last 2 images don’t appear to sit properly and the last 2 are pushed out of line with the rest at the breakpoint for max-width:800px.

They should grid should align as a 2 column layout from a 4 column layout at this breakpoint. As I resize the browser window, the layout breaks then corrects itself on and off within a couple of pixels. I can’t figure out why, please help

Screenshots here

[URL=http://s446.photobucket.com/user/smedz28/media/799%20viewport_zpspii0lg7r.jpg.html][IMG]http://i446.photobucket.com/albums/qq184/smedz28/799%20viewport_zpspii0lg7r.jpg[/IMG][/URL]
[URL=http://s446.photobucket.com/user/smedz28/media/797%20viewport_zpsujuwtnym.jpg.html][IMG]http://i446.photobucket.com/albums/qq184/smedz28/797%20viewport_zpsujuwtnym.jpg[/IMG][/URL]

See the Pen Media query breaking by Marc Smedley ( @smedz28) on CodePen.

[Paulie_D]

You might want to reduce the code in the Pen to just enough to demonstrate the issue.

We realy don’t want to wade through dozens or hundreds of lines of irrelevant HTML/CSS to figure out what might be the issue.

Also, use actual images (you can use an online resource like placebacon.com) for that.

Trim the demo down..and you’re likely to get more assistance.

Help us help you.

[Author]

Posts