Using flexbox to align 3 items in a row - html

Question

I'm trying to align three div's in one row at a 800px break point.
I have two break points in my code and everything works until it hits 800px. At 800px, 'Reviewer 3' ends up on it's own line below 'Reviewer 1 & 2'.
.cards {
display: flex;
flex-direction: column;
align-items: center;
}
.border {
padding: 50px;
font-size: 22px;
}
.center {
position: relative;
left: 25%;
}
#media screen and (min-width: 600px) {
h3 {
color: blue;
}
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.border {
padding: 50px;
text-align: center;
}
.center {
display: relative;
left: 0;
}
.wrapper {
display: flex;
flex-direction: row;
}
.card-1,
.card-2 {
margin: 15px;
border: 1px solid black;
text-align: center;
width: 50%;
}
.card-3 {
position: relative;
left: 25%;
border: 1px solid black;
margin: 15px;
width: 50%;
text-align: center;
}
#media screen and (min-width: 800px) {
h3 {
color: red;
}
.cards {
display: flex-box;
flex-direction: row;
}
.card-1,
.card-2,
.card-3 {
margin: 30px;
border: 1px solid black;
text-align: center;
width: 30%;
height: 20%;
}
}
<div class="cards">
<div class="wrapper">
<div class="card-1">
<h3>Reviewer 1</h3>
<img class="center" src="https://via.placeholder.com/250" alt="placeholder">
<p class="border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
</div>
<div class="card-2">
<h3>Reviewer 2</h3>
<img class="center " src="https://via.placeholder.com/250" alt="placeholder">
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
</div>
</div>
<div class="card-3">
<h3>Reviewer 3</h3>
<img class="center" src="https://via.placeholder.com/250" alt="placeholder">
<p class="border" id="b3">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
</div>
</div>

Answer 1

Your problem is an HTML problem. The third box is outside the .wrapper element.
Also, use flex-basis or min-width instead of width. Finally, are you sure you want to use left: 30%?
Update:
Move #media (min-width: 600px) below #media (min-width: 800px) so the 600 one will override when the screen hits the breakpoint
Add some calc() statements to account for borders + margin
Add flex-wrap: wrap to .wrapper (not .cards) because .wrapper is the parent of .card-1, .card-2, and .card-3 (not .cards).
.cards {
display: flex;
flex-direction: column;
align-items: center;
}
.border {
padding: 50px;
font-size: 22px;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
/* This works for wrapper's children, namely card-1, card-2, card-3 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.card-1,
.card-2,
.card-3 {
border: 1px solid black;
text-align: center;
flex-basis: 100%;
}
#media screen and (min-width: 600px) {
h3 {
color: blue;
}
.card-1,
.card-2 {
margin: 15px;
flex-basis: calc(50% - 32px);
}
.card-3 {
position: relative;
margin: 15px;
flex-basis: 100%;
}
}
#media screen and (min-width: 800px) {
h3 {
color: red;
}
.card-1,
.card-2,
.card-3 {
margin: 30px;
flex-basis: calc(33.33% - 62px);
height: 20%;
}
}
<div class="cards">
<div class="wrapper">
<div class="card-1">
<h3>Reviewer 1</h3>
<img class="center" src="https://via.placeholder.com/250" alt="placeholder">
<p class="border">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
</div>
<div class="card-2">
<h3>Reviewer 2</h3>
<img class="center " src="https://via.placeholder.com/250" alt="placeholder">
<p class="border">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
</div>
<div class="card-3">
<h3>Reviewer 3</h3>
<img class="center" src="https://via.placeholder.com/250" alt="placeholder">
<p class="border" id="b3">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."</p>
</div>
</div>
</div>