JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child">Test</div>
    <div id="child">Test</div>
    <div id="child">Test</div>
    <div id="child">Test</div>
    <div id="child">Test</div>
</div> <br/><br/>

5 child divs set to a width of 20% yet still won't fit in the parent correctly.

CSS

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

#parent{
    
width:500px;
color:white;
background-color:black;    

}

#child{
    width:20%;
    display: inline-block;
    vertical-align:top;
    text-align:center;
}