我试图中心到div的，在一个容器div与flex。flex-wrap工作，align-items工作，justify-content不想工作。：（

<div className="container">
        
        <div className="card-container">

          <h1>Computer</h1>
          <Card cardValue={sendCardToComputer} />
          <p>Points: {computerPoint}</p>
          <p>Round Won: {props.roundLost}</p>
          <br />

        </div>

        <hr />
      
       <div className="card-container">
          <h1>{props.player}</h1>
          <Card cardValue={sendCardToPlayer} />
          <p>Points: {playerPoint}</p>
          <p>Rounds Won: {props.roundWin}</p>
          <br />
        </div>
      </div>

CSS：

.container{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
  /* padding: 30px; */
  height: 400px;
  width: 100%;
  background-color: gray;
}

.card-container{
  width: 200px;
  height: 300px;
  background-color: salmon;
  border: 2px solid black;

}
.card{
  width: 60px;
  height: 100px;
  border: 1.5px solid blue;
  border-radius: 8px;
  margin: auto;
}

正当内容只是不想工作。我试图决定如何使用justify-content，但没有任何选项工作。