title: Centering 3 divs in each row
body: <p>I'm trying to center three divs in a row, but for some reason, I'm getting only 4 divs in one row, and the other two divs in a separate row, what am I doing wrong?</p>
  <pre><code>.container{
  display: flex;                
  justify-content: center; 
  padding-top: 20px;
  color:black;
  padding-bottom: 30px;
  flex-wrap: wrap;
  align-items: center;
  
  .box{
      background-color: white;
      border-radius: 7px;
      box-shadow: 0 2px 5px #ccc;
      width:240px;
      margin: 16px;
      height: 300px;
      padding: 20px;
      float: left;
      text-align: center;
      
  }
  
  
  const Offer = (props) =&gt; {
    return (
      &lt;div id=&quot;ser-id&quot;&gt;
  
      &lt;div className=&quot;box&quot;&gt;
      &lt;img className=&quot;icon&quot; src={props.img} alt=&quot;&quot; /&gt;
      &lt;h2&gt;{props.title}&lt;/h2&gt;
      &lt;p&gt;{props.content}&lt;/p&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>