CSS: Responsive Div's with margin and aligning?

Question

I'm trying to create a page that would have a few Div's which would be responsive.

I have created the divs and they are sort of responsive but I cannot get the margin right!

basically, I need to put some space between the divs so they are not stuck together.

This is what I've done and this is the CSS:

.holder {
    width : 45%;
    height : auto;
    border : 1px solid red;
    display : inline-table;
    float : left;
}

@media (max-width: 600px) 
{
 #container {
     width : 100%;
  }
 .holder {
     width : 100%;
  }
}

I Can simply put .holder {margin:4%; */OR ANY OTHER VALUES HERE*/} but that would mean the first div would be pushed away from its original place which is not what I want.

Could someone please advise on this issue?

Thanks in advance.

Answer 1

How about adding margin only on the right side?

Something like .holder { margin-right: 4%; margin-bottom:4% }.

Answer 2

try replacing this class..

.holder {
    width : 45%;
    height : auto;
    border : 1px solid red;
    display : inline-table;
    float : left;
    margin:0% 3% 2% 0%; /* margin for the div*/
}

here is the FIDDLE