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?

.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) => {
  return (
    <div id="ser-id">

    <div className="box">
    <img className="icon" src={props.img} alt="" />
    <h2>{props.title}</h2>
    <p>{props.content}</p>
    </div>
    </div>
  );
};

CodePudding user response：

With flex-wrap: wrap there will be as many child elements (= flex items) in a row as fit in due to their settings and the width of the container. So if you get four instead three in a row, either reduce the flex container's width or add some side padding (if box-sizing is not border-box)

And you should erase that float: left;. In a flexbox context that makes no sense.

CodePudding user response：

Either you split using percentages and use the following for .box class:

.box{
    flex: 0 0 auto;
    width: 33.33333333%;
}

or you give the .container a fixed width that is the sum of only 3 boxes so that only 3 fit and pushes the other 3 on the next row. Currently one box is set to 240px so if the container can fit 4 it will.