How to center my Blog’s divs in my website?

Well,i’m making my first web-project, restaurant site.I want to make it responsible and etc, everything was getting good except one part of site,Blog,i can’t center my divs like here ( ) when screen size less than 1000px(second query)

Here is my HTML code:

<section id=”part2″>
<div class=”container”>
<h1 class=”topper-header”>BLOG</h1>
<div class=”box1″>
<img class=’blog-image’ src=”images/img1-service.jpg” width=’250′ height=”175″/>
<h3>10 RULES TO BUILD A WILDLY</h3>
<p>You can edit all of this text and</br> replace it with anything you have</br> to say on your blog.</p>
<li><a>Read More ></a></li>
</div>
<div class=”box1″>
<img class=’blog-image’ src=”images/img3-service.jpg” width=’250′ height=”175″/>
<h3>9 STEPS TO STARTING A BUSINESS</h3>
<p>This is a generic blog article you</br> can use for adding blog content /</br> subjects on your website.</p>
<li><a>Read More ></a></li>
</div>
<div class=”box1″>
<img class=’blog-image’ src=”images/img2-service.jpg” width=’250′ height=”175″/>
<h3>7 BIG THINGS A START-UP MUST HAVE TO</h3>
<p>You can also change the title</br> listed above and add new blog</br> articles as well.</p>
<li><a>Read More ></a></li>
</div>
<div class=”box1″>
<img class=’blog-image’ src=”images/img4-service.jpg” width=’250′ height=”175″/>
<h3>HOW TO MAKE EXTRA MONEY</h3>
<p>Edit your Blog articles from the</br> Pages tab by clicking the edit</br> button. </p>
<li><a>Read More ></a></li>
</div>
</div>
</section>

and finally here is my CSS:

#part2{
margin-top:20px;
padding-bottom:100px;

display: flex;
justify-content: center;
align-items: center;
margin:auto;
width:90%;
}

.box1{
width: 50%;
float:left;
margin-bottom:25px;
}

.box1 li{
color:#00ced1;
}

.box1 h3{
margin-top:0px;
color:#00ced1;
padding-bottom:3px;
font-size:17px;
}

.box1 p{
padding-bottom:0px;
font-size:18px;
}

.blog-image{
padding-right:20px;
padding-left:5px;
float:left;
padding-left:0;
}

@media all and (max-width:1200px) {
.topper-header{font-size:240%;}

#S1{width:100%;padding-right:10px;margin-left:-10px;}
#S2{width:100%;padding-right:10px;margin-left:-10px;}
.menu-h2{margin-left:-250px;}

.blog-image{width:230px; height:150px;}
.box1 h3{font-size:16px;}
.box1 p{padding-bottom:0;font-size:15px;}
.box2 h3{font-size:16px;}
.box2 p{padding-bottom:0;font-size:15px;}

#part1 p{font-size:100%;}
#about-image{width:500px; height:440px;}
}

@media all and (max-width:1000px) {
.topper-header{font-size:170%;}

#about-image{width:420px; height:420px;}
#part1 p{font-size:90%;}

.box1{width:40%;}
.blog-image{width:350px; height:250px;padding-bottom:5px;}
.box1 li{margin-top:-8px;font-size:15px;}
}

I hope you get what I meant want center my divs when size is lesser than 1000px