I'm struggling to center four green divs that have a float left, surrounded by a wrapper div in blue. I want them to be aligned a certain way, but on larger screens, they are not displayed in the center. I need them to float underneath each other when the screen size is reduced. Any suggestions on how to achieve this?
#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>
If you have any suggestions, please let me know. Thank you!