親の中で最初の子の直前に空白があります

Question

親の「境界」の直後に最初の子が空白を持つ理由は分かりません。私の間違いは何ですか？

.content { 
    font-size: 22px; 
} 

.content__row { 
    height: 150px; 
} 

.content__column_half { 
    width: 49%; 
    height: 100%; 
    display: inline-block; 
    box-sizing: border-box; 
    padding-top: 30px; 
    padding-bottom: 30px; 
    border-bottom: 1px dotted #000000; 
    background-color: graytext; 
} 

https://jsfiddle.net/x8ant22n/

Answer 1

.content__column_halfにこれを追加します。

display: block; 
float: left; 
margin: 0 .5%; 

そして削除：display: inline-block。

フィドル：https://jsfiddle.net/x8ant22n/2/

---

フレックスオルタナティブ：

.content__rowにdisplay: flexを追加し、.content__column_half`するflex-grow: 1を追加します。

display: inline-block

フィドル削除：https://jsfiddle.net/x8ant22n/3/