Responsive landscape image

[theremotedr]

Hi,
Here is a page as example http://www.theremotedoctor.co.uk/karford.html?scrollto=selection

As you will see there are 4 images,last one being Situated in Weston mare.
I'm happy with the view on PC iPhone etc & iPad in Portrait but when looking in Landscape view you have 3 images in one row then below you have the last image.
I'm trying to get it to show the 4 images in one row.
I've tried the following but no change was seen.

max-width:100%;
height:auto;

To be honest I've been using chrome f12 a lot more now rather than the Firefox f12 but finding my way around the media code section isn't going down well as I've nothing to check on the PC screen.

[styxlawyer]

It looks fine here in Opera.

5834

[theremotedr]

Hmmm,
Learning this is one thing but then media queries for this screen size and that screen size is another.
Is the code I supplied correct/in the right place ?

My iPad is exactly the same view as the PC apart from these post issue.
Obviously portrait view is different but ok.

This is why I think the code is incorrect or in the wrong place.

[theremotedr]

Ive had a look again but cant see whats causing it to be on 2 rows ?
Here is a screen shot which shows the issue.

5835

[theremotedr]

Here is an update but not fully satisfied.
I could not find the answer to why the 4 images would not fit on the one line when using the code

max-width:100%;
height:auto;
So looking at the original size of the image I could see they were W287 X H92
So I decided that each page that required 4 images in a row would have its image width changed from 287 to 243 thus leaving the height untouched at 92
Uploaded and these pages now have 4 images in a row BUT I see the height has been altered and now aren't the size that they should be.
So I think the codes height auto property has kicked in and altered this.
That's great but doesn't answer why the max width code does nothing.

Look here for original image 287 X 92 three in a row
http://www.theremotedoctor.co.uk/facjaguar.html?scrollto=selection

Look here for edited width image four in a row but auto code changing its height
http://www.theremotedoctor.co.uk/accford.html?scrollto=selection

My aim is to put the width back to 287 and let a working code alter it.