Boxes don't align vertically when screen is small - html

Question

The code I have made contains two boxes that when the screen is big the text boxes will align horizontally, and it is perfect when it is on full screen. the problem is when I resize the browser the second text box sticks to the right side of the screen, (this is because of the right float). I have tried anything but when I remove the float the whole box disappears underneath the nav bar.
What I would like is when the screen is to small for the boxes to align next to each other that they will automatically align vertically.
Thanks guys you are awesome!
.reviews{
/* background-color: antiquewhite;*/
/* width: 400px;*/
text-align: center;
/* margin-left: 250px;*/
padding: 20px;
margin-top: -175px;
height: 280px;
font-size: 14px;
min-width: 200px;
}
.review1{
display: block;
border: 2px, black;
width: 20rem;
height: 20rem;
float: left;
margin-left: 230px;
padding: 10px;
border-style: hidden;
border-color: rgba(176, 178, 184, 0.4);
border-collapse: collapse;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
min-width: 150px;
}
.review2{
display: block;
/* width: 350; */
width: 20rem;
height: 20rem;
float:right;
margin-right: 14.375rem;
padding: 10px;
border-spacing: 20px;
border-style: hidden;
border-color: rgba(176, 178, 184, 0.4);
border-collapse: collapse;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
min-width: 150px;
}
.list{
text-align: left;
list-style:none;
text-align: center;
}
</div>
<div class="reviews">
<div class="review1">
<img src="white-about.png" height="100px" />
<h3>Roland</h3>
<p>"Wij hebben Cisco-training gehad van Marcel.
Hij weet de technische achtergrond van de materie perfect begrijpelijk onder woorden te brengen,
Zelfs de lastiger zaken. Hij is een geboren docent."</p>
</div>
<div class="review2">
<img src="white-about.png" height="100px" />
<h3>Eddy</h3>
<p>"Marcel is een zeer fijne en goede collega,
hij neemt zijn tijd voor de uitleg is een zeer goede Cisco docent. Hij heeft heel veel kennis van Cisco en daar heb ik dankbaar gebruik van gemaakt Dus al met al is Marcel een hele fijne collega."</p>
</div>
</div>

Answer 1

You can try something like this with css grid:
.wrapper{
max-width:900px;
margin:auto;
}
.reviews{
display:grid;
grid-gap:10px;
grid-template-columns: repeat(auto-fill, 300px);
max-width:900px;
justify-content:space-between;
}
.review{
border: 2px solid black;
}
<div class="wrapper">
<div class="reviews">
<div class="review">
<img src="white-about.png" height="100px" />
<h3>Roland</h3>
<p>"Wij hebben Cisco-training gehad van Marcel.
Hij weet de technische achtergrond van de materie perfect begrijpelijk onder woorden te brengen,
Zelfs de lastiger zaken. Hij is een geboren docent."</p>
</div>
<div class="review">
<img src="white-about.png" height="100px" />
<h3>Eddy</h3>
<p>"Marcel is een zeer fijne en goede collega,
hij neemt zijn tijd voor de uitleg is een zeer goede Cisco docent. Hij heeft heel veel kennis van Cisco en daar heb ik dankbaar gebruik van gemaakt Dus al met al is Marcel een hele fijne collega."</p>
</div>
</div>
</div>