here my attempt to recreate what you are trying to do http://mytestdesigns.pw/ .
First off it appears that you have 2 media boxes in one column and 2 in another might be best to have them all in one column.
Also I noticed that you images are not as big as your media boxes the images are 500x332px and the media box is 520x364px. Might be best to make the images the size of the box so that it fills out.
Now as for the space in between the media boxes in the past I have achieve the effect of 4 media boxes with no space between them by adding a background to the column. This is a lot easier if you are working with solid colors but can be tricky when working with images and getting them to align with the image in the media boxes but very doable.
CSS would be like this:
background-image: url(image url here)
And add the my-back-area to the custom style of the column.
I would recommend you try this on a separate page there is no need to destroy what you have already done. and if it works then carry it over.
Hope this helps
there may be another way that I don't know of
Edited by Aires, 03 May 2014 - 06:00 PM.