Trouble centering Divs?

Question

I apologize if this is a basic question, but i'm having trouble centering four divs. All four green divs have a float left, then there is a wrapper div (blue). I want to center the four divs but have them aligned like this (On a larger resolution they are not displayed along the middle). So that when reducing the screen size the divs will float underneath each other.

http://jsfiddle.net/qvu712tj/

#blog-wrapper {
  background-color: blue;
  width: 100%;
  height: 700px;
  margin-left: auto;
  margin-right: auto;
  align: center;
}
.blog-section {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px;
  float: left;
  padding: 5px;
}

<div id="blog-wrapper">
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
  <div class="blog-section"></div>
</div>

I hope this makes sense please could anyone help?

Answer 1

Try this:

.blog-section {
  background-color: green;
  height: 200px;
  width: 45%;
  margin: 10px 2.5%;
  float: left;
/* padding: 5px; */ 
}