Struggling to center two divs within a container using flexbox. Flex-wrap and align-items are working fine, but justify-content just won't cooperate. :(
<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;
}
Unable to get justify-content to work properly... Any suggestions on how to use it effectively in this scenario?