How to fix flex direction to row - html

Question

I have a little problem, when a use display flex in the main container for some reason does not work.
The flex direction is always in column. I am already looking for solutions of all kinds and I can't find one that works for me. Maybe it could be a silly mistake and I'm not realizing it, I ask for help with this.
.box-container a{
color: var(--goatred-color);
}
.box-container{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: #ccc;
}
.box{
flex: 1 1 300px;
background: #fff;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
margin: 20px;
}
.box .image{
padding: 10px;
background: #eee;
text-align: center;
}
.box .image img{
height: 200px;
width: 250px;
object-fit: cover;
filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
}
.box .title .info{
padding: 10px;
color: #666;
font-size: 20px;
}
.box .info .subInfo{
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 10px;
}
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>

Answer 1

Two problems:
You had one box element, I believe your intention is to have many boxes as elements which behave like rows. I added this HTML fix.
I slightly modified the padding of the content to be left aligned, see how the title of each box and the price were not left aligned.
If you agree with the solution then great. If you disagree I kindly ask you to look over the changes and try to modify it to your needs.
Note: expand the snippet to full width, you specified flex boxes 300px wide so you need to see it in a wider screen size.
.box-container a {
color: var(--goatred-color);
}
.box-container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: #ccc;
}
.box{
flex: 1 1 300px;
background: #fff;
border: 1px solid rgba(0,0,0,0.3);
position: relative;
overflow: hidden;
margin: 20px;
}
.box .image{
padding: 10px;
background: #eee;
text-align: center;
}
.box .image img{
height: 200px;
width: 250px;
object-fit: cover;
filter: drop-shadow(0 3px 5px rgba(0,0,0,.7))
}
.box .info{
padding: 10px;
color: #666;
font-size: 20px;
}
.box .info .subInfo{
display: flex;
align-items: center;
justify-content: space-between;
}
<div class="box-container">
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
<div class="box">
<div class="image">
<img src="img/Jer1s.png" alt="">
</div>
<div class="info">
<h3 class="titulo">Goat Esports <span>Jersey 2020</span></h3>
<div class="subInfo">
<div class="price">₡14.900</div>
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half"></i>
</div>
</div>
</div>
<div class="overlay">
</div>
</div>
</div>