Flexbox Help

Hello Dev community,
I have been working on the Frontendmentor Social Proof Section project for over a week. I have been stuck on using Flexbox. I understand the fundamentals for using Flexbox thanks to flexbox froggy. Here is what I understand so far:

• justify-content is used to position items on the main axis (horizontally).

• align-items & align-self are used to position items on the cross axis(vertically)

• flex-direction is used to position items in a row(horizontally) or column(vertically).

• flex-wrap is used to wrap items

The are where I am struggling is HOW to position items using flex-box.

HTML Code

<main>
        <div class="container">
            <div class="heading">
          <h1>
          10,000+ of our users love our products.
         </h1>
         <p>
          We only provide great products combined with excellent customer service.
          See what our satisfied customers are saying about our services.
         </p>
        </div>

          <div class="star-rating reviews"> 
            <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in Reviews
          </div>
         <div class="star-rating guru">  
           <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in Report Guru
          </div>
         <div class="star-rating besttech"> 
          <span class="stars">⭐⭐⭐⭐⭐ </span>Rated 5 Stars in BestTech
          </div>
    </div>
</main>

     <section class="testimonials">
          <div class="review-box colton">
          <img src="images/image-colton.jpg" alt="colton-smith">
        Colton Smith 
        <span>Verified Buyer</span>
        "We needed the same printed design as the one we had ordered a week prior.
        Not only did they find the original order, but we also received it in time.
        Excellent!"
        </div>


      <div class="review-box irene">
        <img src="images/image-irene.jpg" alt="irene-roberts">
        Irene Roberts 
        <span>Verified Buyer</span>
        "Customer service is always excellent and very quick turn around. Completely
        delighted with the simplicity of the purchase and the speed of delivery."
      </div>


      <div class="review-box anne">
        <img src="images/image-anne.jpg" alt="anne-wallace">
        Anne Wallace 
        <span>Verified Buyer</span>
        "Put an order with this company and can only praise them for the very high
        standard. Will definitely use them again and recommend them to everyone!"
      </div>

  </section>

CSS Code

body {
    font-size: 15px;
    font-family: 'Spartan', sans-serif;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: row;
    height: 20vh;

} 

.heading {
    border: 10px solid purple;
    flex-direction: column-reverse;
    justify-content: flex-start;
}

h1 {
    justify-content: flex-start;
}


section {
    display: flex;
    border: 5px solid paleturquoise;
    justify-content: right;
    flex-wrap: wrap;
}

div.review-box.colton {
    background-color: palevioletred;
    justify-content: left;
    align-items: flex-end;

}
/* h1, p {
    width:75%;
}

h1 {
    color: hsl(300, 43%, 22%);
}

p {
    color: hsl(300, 24%, 96%);
    color: hsl(303, 10%, 53%);
}

span {
    color: hsl(333, 80%, 67%);
}

section {
    padding: 10 40px;
}

img {
    border-radius: 50px;
} */

/* star rating */
.star-rating {
    background-color: hsl(300, 24%, 96%);
    justify-self: flex-start;
    flex-wrap: wrap;
    border: 10px solid pink;
}

/* .stars {
    padding: 0px 20px;
}

.guru {
    justify-self: flex-end;
    margin-left: 50px;
}

.besttech {
    margin-left: 100px;
}  */

/*testimonials */
.testimonials {
    display: flex;
    padding: 0 10rem;
    margin: 100px;
    justify-content: space-between;
}

 .review-box {
    background-color: hsl(300, 43%, 22%);
    border-radius: 10px;
    padding: 20px;
} 

/* .colton {
    background-color: blue;
}


/* footer */
footer {
   color: black;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

Images of the current layout

Any feedback or tips is greatly appreciated.

Comments

[Lean7991]

Hola, novato aqui :D
Si buscas que todos las cartas se alinien horizontalmente, encierra todos los div-card
dentro de un div padre y dale a este la propiedad "display: flex;" esto activa las demas propiedades, mucha suerte.

[Chantae P.]

Thank you so much. Really appreciate the advice.

[Lean7991]

De nada, si hay mas dudas mira aqui
jonmircha.com/flexbox

[Chantae P.]

Thanks again!

[iakovosvo]

If you just remove flex-wrap from section they will align horizontally. Also when you work with flex or grid you can use gap instead of padding. TIP: take the free course What the flexbox from Wes Bos.

[Chantae P.]

Wow never heard about Wes Bos. I'll make sure to check it out. Thank you!