How to equally distribute floated divs?

<title>Mahi CSS Tution</title>

<style type="text/css">
    .container{
        font-size:0;
        text-align:justify
    }

    .container::after{
        width: 100%;
        display: inline-block;
        content: "";
        visibility: hidden;
    }

    .box{
        margin:20px;
        width:50px;
        height:50px;
        background:green;
        display:inline-block
    }

    /*Div 2 - the box-container is so you can see the effect*/
 
    .container1{
        display:table;
        text-align:middle;
        width:100%
    }

    .box-container{
        display:table-cell;
        width:25%;
    }

    .box1{
        width:50px;
        height:50px;
        background:blue;
        margin:0 auto
    }
</style>

<!-- Div 1 -->
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

<hr/>

<!-- Div 2-->

<div class="container1">

    <div class="box-container">
         <div class="box1"></div>
    </div>

    <div class="box-container">
         <div class="box1"></div>
    </div>

    <div class="box-container">
         <div class="box1"></div>
    </div>

    <div class="box-container">
         <div class="box1"></div>
    </div>

</div>


Output :)