JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
   <div id="box1">
       <div class="demo_content"></div>
    </div>
   <div id="box2">
      <div class="demo_content"></div>
   </div>
   <div id="box3">
       <div class="demo_content"></div>
   </div>
   <div id="box4">
       <div class="demo_content"></div>
   </div>
    <div style="clear:both;"></div>
</div>

CSS

body {
   text-align: center;  /* just for demo */
}

#container {
   width: 95%; /* change this to see effect */
   border: 1px black solid;
   text-align: center;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

.demo_content {
    width: 60px;  /* made smaller for this demo */
    height: 25px;  /* made smaller for this demo */
    background-color: blue;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

#box1 {
    width: 25%;
    float: left;
    text-align: center;
}

#box2 {
    width: 25%;
    float: left;
    text-align: center;
}

#box3 {
    width: 25%;
    float: left;
    text-align: center;
}

#box4 {
    width: 25%;
    float: left;
    text-align: center;
}