Trouble with positioning images evenly inside container - html

Question

One of my questions about applying float to resizable images was answered by Gasim (thankyou) but I still have one more problem to fix.
I have two images which have this css code applied to them...
.image-container {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler2.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container {
max-width: 500px;
}
}
.image-container2 {
display: inline-block;
width: 100%;
background-size: cover;
background-position: center;
background-image: url(Images/Filler3.png);
height: 250px;
margin-right: auto;
margin-left: auto;
}
#media only screen and (min-width : 1200px) {
.image-container2 {
max-width: 500px;
}
}
So now they're resizing correctly and aligned next to one another, I am unable to position them horizontally like my example below. I have tried the only way I know how to do this (margin-left: auto , margin-right:auto) but this didn't work. Also padding isn't working? Is there some part of this code which prevents these both from working and if so what do I need to fix it?
Any input if helpful thanks :)

Answer 1

Maybe this is not the best solution for responsive images, but I generally use media queries with a mobile first approach and it has been working out great. Basically, you set the boxes' widths to 100% by default and on larger screens you set the width that you want:
.image-container {
float: left;
width: 100%;
background-size: cover;
background-position: center center;
background-color: red; /* for testing */
height: 250px;
}
#media only screen and (min-width : 1224px) {
.image-container {
max-width: 500px;
}
}
Here is the result: http://codepen.io/gasim/pen/xbYQdd
Try to make the window size smaller and you will see the difference. It is much simpler to test, debug, and modify this code.
EDIT: Forgot to mention. If you can also use display: inline-block instead of floats.
EDIT 2: To add padding between containers you need to add margin to a specific value, not auto. For example:
.image-container {
/* rest of the values */
margin: 5px;
}
This will add 5px margin to left, right, top, and bottom of the image container. If you want to have center the image containers also, I would add them in another container:
<div class="container">
<div class="image-container" style="background-image: url(URL_HERE);"></div>
<div class="image-container" style="background-image: url(URL_HERE);"></div>
</div>
and add the styles:
#media only screen and (min-width: 1224px) {
.container {
width: 80%;
margin: 0 auto;
}
}
Also, please check out the way I added the background images, using styles. It is much cleaner than writing CSS for each background image. That way you can have one class image-container and just add as many background-images without relying on CSS.