Center blocks/divs horizontally and allow them to stack inline - html

Question

I've got divs that are a fixed width and height and display in a row. The problem comes when I'm trying to make it responsive. I need the divs to stack in a row underneath eachother.
I made a fiddle http://jsfiddle.net/h657t6r2/1/ so you can see. If you play around with the width of the content window, you'll see the blocks stack but the 4th one then stacks underneath the 2nd one because it is center aligned. I want it to be center aligned because without it it leaves a big gap on the right and doesn't look good. A similar sort of stacking as on https://www.behance.net, except they never have a situation like mine where there's leftover blocks.
What I need is for the 4th block to stack neatly underneath the 1st block when the screen gets smaller and they stack.
FYI: The number of blocks is dynamic, it's not always 4.
<div class="content">
<div class="course_list">
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
<div class="box coursebox">
</div>
</div>
</div>
.coursebox{
border: green 1px solid;
padding:10px;
width: 90px;
height: 90px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.content{
text-align: center;
}
.course_list{
display: inline-block;
}

Answer 1

Per my comment
Since your blocks are fixed width anyway, you can center course_list and leave the blocks inside of it left aligned. Give course_list a width at different break points (media query) to have the ideal number of boxes per row. This is a cross browser solution
Here is an example of simplified version of what you had
http://jsfiddle.net/h657t6r2/2/
.coursebox{
border: green 1px solid;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.course_list{
margin: 0 auto;
width: 560px;
}
#media (max-width: 559px) {
.course_list{
margin: 0 auto;
width: 280px;
}
}
As you can see I only have one break point for simplicity. You can put in as many as you need. Also note I got rid of the space in between your block's closing/opening tags to avoid the extra space when using display inline block
OR
You can have something even simpler like
http://jsfiddle.net/h657t6r2/3/
Set a % width for the centered container and let the blocks fall naturally
.coursebox{
border: green 1px solid;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 20px 20px 20px;
display: inline-block;
}
.content{
}
.course_list{
margin: 0 auto;
width: 80%;
}