Space between images grows on browser shrink - css

Question

I have some images which get smaller as the browser size does.
It works well for me but as the images get smaller the space between them gets bigger.
When the browser is at its smallest, the space between images is the size of the image.
If you resize your browser slowly down to the smallest you will see the media queries kick in and see what i mean.
Ive tried that many things ive lost track.
Ive tried replicating it in a fiddle but it just requires most of my code to do so, so i can only offer the link to the page http://www.techagesite.com/page-1work1112211.htm
.top_grow{
display:inline-block;
vertical-align:top;
font-size:0;
margin:0 auto;
overflow:hidden;
white-space:nowrap;
}
.cats {width:100%;
height:100%;
display:block;
font-size:0;
}
.text{
font-size:11px;
letter-spacing:1px;
word-spacing:1px;
}
<div class="top_grow">
<a href="http://www.techagesite.com/hd-wii-wallpapers-mario-kart-super-mario-galaxy-2.htm">
<img class="cats" src="http://freephonewallpapersformobile.files.wordpress.com/2014/05/super-mario-galaxy-hd-desktop-background_small1.jpg"></img>
<div class="text">
Mario Galaxy
</div>
</a>
</div>

Answer 1

It looks as though your images are being spaced out with a space character. The space character does not have a fluid width.
The solution would be to use floats.
Something like
.holder {
width: 100%;
}
.img-holder {
float: left;
margin-right: 3%;
width: 22%;
height: 100px;
background-color: #ccc;
}
img {
width: 100%;
height: auto;
}
<div class="holder">
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
<div class="img-holder"><img src="#" /></div>
</div>
This will give you four columns of images with a variable width gutter.
You will need to alter this to suit your own purposes, but I hope this sends you in the right direction.
Try it out in a new file first, then apply what you learn to your specific issue and this should work fine.