Problème de css

Bonjour,

J'ai un souci dans mon css et je ne vois pas trop comment le régler.
j'arrive pas a placer mon élément 6 juste en dessous des 4 premiers elements.
Il se met sous mon élément 5 comme si il y avait un clear.
Voici mon code
Css

.clear{
    clear: both;
}

.nb_new_license{
    /* width: calc(20% - 20px);
    margin-right : 20px ; */
    
}

.nb_active_license{
    /* width: calc(20% - 20px);
    margin-right : 20px ; */
}
.nb_modified_license{
    /* width: calc(20% - 20px);
    margin-right : 20px ; */
}

.nb_canceled_license{
    /* width: calc(20% - 20px);
    margin-right : 20px ; */
}
.connected_user{
    width: 20%;
    height: calc(388px - 20px);
    margin-bottom : 20px ;  
}

.nb_new_license,.nb_active_license,.nb_modified_license,.nb_canceled_license{
    width: calc(20% - 20px);
    margin-right : 20px ;
    height: calc(97px - 20px);
    margin-bottom: 20px;   
}
.nb_new_license,.nb_active_license,.nb_modified_license,.nb_canceled_license ,.connected_user,.new_client{
    display: inline-block ;
    background-color: white ;
    box-sizing: border-box ;
    padding : 20px ;
}
.last_created_license,.last_modified_license,.last_canceled_license{
    background-color: white ;
    box-sizing: border-box ;
    padding : 20px ;
    height: calc(20% -20px);
    margin-bottom: 20px ;
}
.new_client{
    width: calc(80% - 20px) ;
    height: calc(291px - 20px);
    margin-right: 20px ;
    margin-bottom: 20px ;
}
.last_created_license{
    height: calc(20% -20px);  
}
.last_modified_license{
    height: calc(20% -20px);  
}
.last_canceled_license{
    height: calc(20% -20px);  
}

Html :
<div class="nb_new_license">1</div>
<div class="nb_active_license">2</div>
<div class="nb_modified_license">3</div>
<div class="nb_canceled_license">4</div>
<div class="connected_user">5</div>
<div class="new_client">6</div>
<div class="clear"></div>
<div class="last_created_license">7</div>
<div class="last_modified_license">8</div>
<div class="last_canceled_license">9</div>