margin-bottom not working on divs

Question

Can someone help me figure out why my margin-bottom rule within my mobile view media query is not working?

I have even added a class to clear the floats named .clearer but that isn't working either. All I want is for the left image to have a 30px margin below it on the mobile view.

Here is the page... http://www.haveaseatrentals.com/seat-yourself/

CSS rule from the mobile view's media query and the rule that I am using to clear the floats...

#seatYourselfLeft {margin-bottom: 30px; }
.clearer{clear:both; width:100%; height:0; display: block;}

Any help is greatly appreciated.

Solution

Change your CSS for the image containers to display: inline-block; instead of display: inline;

This question has been asked before, and has been answered here: https://stackoverflow.com/a/8782644/3781678

Comments

[Feek]

@AlexWilliams It worked for me on your site! You need to add margin-bottom: 30px; to #seatYourselfLeft, that is not present on your site.