Kafayı yemek üzereyim yardım eder msiniz?

Aşağıdaki kodlarla 4 tane yan yana div yapmak istiyorum. olmuyor hata nerde bu kodlarda?

.grid-three-layout .post {
    width: calc( 20% - 14px );
    float: left;
}

.grid-three-layout .post:nth-of-type(4n-1), .grid-three-layout .post:nth-of-type(4n-2) { margin-right: 21px }
.grid-three-layout .post:nth-of-type(4n-2), .grid-three-layout .post:nth-of-type(4n-3) { margin-right: 21px }
.grid-three-layout .post:nth-of-type(4n-3), .grid-three-layout .post:nth-of-type(4n-4) { margin-right: 21px }
.grid-three-layout .clearfix:nth-of-type(4n-3), .grid-three-layout .clearfix:nth-of-type(4n-4) { display: none }

.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}

.item {
width:25%;
height: 100px;
background: red;
margin: 10px
}

2 gündür 4 adet div'i yanyana getiremediniz hocam Kodlarda bir hata yok bu şekilde yan yana gelir başka bir css kodu ile çakışıyor olmasın sizin ki ?

marginler yüzünden 63px fazla geliyor.

Aşağıda ki örnek kod inceleye bilir misiniz?

<style type="text/css">
.kolon { float:left; border:1px solid red; padding:10px; margin:10px; }
</style>

<div class="kolon">1 nolu div </div>
<div class="kolon"> 2 nolu div </div>
<div class="kolon"> 3 nolu div </div>
<div class="kolon"> 4 nolu div </div>
<div style='clear: both'/>