境界線を追加するとレイアウトがぼやけます

Question

何らかの理由で、グリッド内の一部のdivに境界線を追加すると、間隔が狂います。ここで

がjsfiddleリンクです： https://jsfiddle.net/gvcuLbbc/

body{ 
    background-color:#f6db05; 
} 

#container{ 
    width: 100%; 
    text-align: center; 
} 

#grid{ 
    align-content: center; 
    width: 90%; 
    margin: 0px auto; 
    display: inline-block; 
    margin-top: 20%; 
    } 

.smallcontainer{ 
    height:200px; 
    width:28%; 
    margin:2%; 
    float:left; 
} 

.textcontainer{ 
    border: 1px solid black; 
} 

私は彼らのコンテナのサイズを大きくしようとしましたが、それは助けをdidntの。私は何が欠けていますか？

Answer 1

border-boxモデルでお試しください。最初にこれを使用します。

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
      box-sizing: border-box; 
} 

フィドル：https://jsfiddle.net/uys5mm1y/