Adding border messes up layout
<p>For some reason adding a border to some of the divs in a grid will mess up the spacing.</p>

<p>Here is jsfiddle link:
<a href="https://jsfiddle.net/gvcuLbbc/" rel="nofollow noreferrer">https://jsfiddle.net/gvcuLbbc/</a></p>

<pre><code>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;
}
</code></pre>

<p>I've tried increasing the size of their container but it didnt help. What am I missing? </p>