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

Question

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 ( https://62bc5048ee1d4.site123.me ) 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

Answer 1

You could add these code:

@media all and (max-width:1000px) {
    .topper-header{
        width: 100%;
    }
    .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
    .box1{
        float: none;
    }
}

Result:

To solve the image overlapping problem, add these code:

@media all and (max-width:1000px) {
    .blog-image{width: 100%;}
}

Add margin:

@media (max-width: 1000px){
    .box1:nth-child(odd) {
        margin-left: 1rem /*or other value*/;
    }
}

Result:

 #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;} } @media all and (max-width:1000px) { .topper-header{ width: 100%; } .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; } .box1{ float: none; } } @media all and (max-width:1000px) { .blog-image{width: 100%;} } @media (max-width: 1000px){ .box1:nth-child(odd) { margin-left: 1rem /*or other value*/; } }

 <html><head></head><body><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 &gt;</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 &gt;</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 &gt;</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 &gt;</a></li> </div> </div> </section></body></html>