Я напишу CSS таким образом:
CSS
.testimonials {
margin-top: 5rem;
background: url('testbg.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
height: 100vh;
}
.comment {
position: relative;
width: 100%;
}
.comment::after {
content: "";
display: table;
clear: both;
}
.comment-box {
float:left;
margin: 0.5em 1%;
padding: 1%;
width:46%;
background-color: white;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
border-radius: 30px;
}
.testimonials h1,
.testimonials p {
text-align: center;
}
.testimonials h1 {
font-family: Raleway;
padding-bottom: 1rem;
}
.testimonials p {
font-family: Montserrat;
}
.testimonials h5 {
font-family: Montserrat;
font-style: italic;
padding-top: 1rem;
text-align:right;
}
/*Second section - location style*/
.locations{
position: relative;
width: 100%;
margin-top:5em;
}
.locations::after {
content: "";
display: table;
clear: both;
}
.map{
float:left;
width:100%;
}
@media screen and (max-width:980px){
/*tablet style*/
.comment-box{
width: 96%;
}
}
@media screen and (max-width:420px){
/*mobile style*/
.comment-box{
width: 96%;
}
}
Как вы можете видеть рядом с гибкостью дисплея и общей работой с flex im, используя float left и im давая ширину.
самое важное это решение - кроссбраузеры, ваш веб-сайт будет хорошо выглядеть и в inte rnet explorer (IE не поддерживает гибкость полностью, вам нужно использовать префикс и все же некоторые вещи будут работать некорректно, также вы можете столкнуться с проблемами с Firefox).
Я могу порекомендовать вам работать с сеткой как с простой сеткой. очень прост в использовании, и это обеспечит 100% кроссбраузерность вашего веб-сайта.
но это только мое мнение.
Пример пера:
https://codepen.io/Elnatan/pen/KKzKOwb