cardboxes on 1 row vs 1 column - css

Question

I am trying to place my card boxes on 1 row rather than on 1 column. Can someone explain to me what is wrong with this CSS?
import "./Card.css"
class Card extends PureComponent {
render() {
return (
<div className="cardcontainer">
<div className="cardbox">
<div>{this.props.title}</div>
<div>{this.props.category}</div>
<div>{this.props.likes / this.props.dislikes}</div>
</div>
</div>
)
}
}
export default Card
.cardcontainer{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.cardbox{
border: 1px solid red;
width: 200px;
height: 200px;
}

Answer 1

Your cardlist style needs to be applied with the parent component of the Card component.
EG you may have another component called cardList and within the render method for that you apply the cardcontainer style EG.
<div className = cardcontainer>
<Card/>
</div>
This is because in your current code you have initiated the cardcontainer style for every row. I have recoded your work in CSS and HTML so you can see what I mean. I hope this helps.
.cardcontainer{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width:1000px;
}
.cardbox{
border: 1px solid red;
width: 200px;
height: 200px;
}
<div class="cardcontainer">
<div class="cardbox">
<div>A title</div>
<div>A CAtegory</div>
</div>
<div class="cardbox">
<div>A title</div>
<div>A CAtegory</div>
</div>
</div>