JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

</head>
<body>



<section id="boxes"> 
    <div class="container"> 
        <div class="box"> 
          <h3>باکس 1</h3> 
          <p></p> 
        </div> 
 
        <div class="box">
          <h3>باکس 2</h3> 
          <p> </p> 
        </div> 
 
        <div class="box">
          <h3>باکس 3</h3> 
          <p> </p> 
        </div> 
        
        
      </div> 
    </section>



</body>
</html>

CSS

#boxes{
  width:100%;
  height:500px;
  background-color:red;
}
.container{
  width:80%;
  margin:0 auto;
  background:blue;
  zoom:1;
}
/*

این تکنیک به کلیر فیکس مشهوره 
باید ازش استفاده کنی تا وقتی ارتفاه باکسات زیاد شد . خود به خود کانتینرتم زیاد بشه ارتفاعش

منظورم این تکنیک زیره :

*/
.container:after{
  display:block;
  content:'';
  visibility:visible;
  clear:both;
}
.box{
  width:30%;
  height:150px;
  background-color:yellow;
  margin-right:20px;
  float:left;
}
.box:nth-child(3){
  margin-right:0px;
}