How to place border around multiple divs

I want to have a border around multiple divs, so I was trying to set the border around the parent div. However, this leads to a slight gap between the children and the parent (One of the children will have a different background color). Is there a way to prevent this behavior?

https://jsfiddle.net/fpcg2x07/8/

<div class=”container”>
<div class=”child”>
child1
</div>
<div class=”child”>
child2
</div>
</div>

css:

.container {
display: inline-flex;
border: 1px solid black;
}
.child{
padding:0.5rem;
}
.child:first-child{
background-color: red;
}

Thanks!