I want to text be in one line like this:

but I don't know how to do it. It looks like this:

link to the code

.clients_container {
  width: 1310px;
  max-width: 100%;
  margin-bottom: 5.75rem;
}

.clients_title {
  margin-top: 2.85rem;
  margin-bottom: 3.65rem;
  font-size: 2.75rem;
}

.clients_items {
  justify-content: center;
  display: flex;
  flex-direction: row;
  gap: 3rem;
}

.clients_item_inside {
  display: grid;
  justify-items: center;
  gap: 1rem;
  width: 316px;
  max-width: 100%;
}

.clients_item_inside,
.aspect_ratio {
  max-width: 17rem;
}

.aspect_ratio {
  position: relative;
  height: 191px;
}

.clients_item_title {
  width: 100%;
  padding-top: 1rem;
  margin-top: 0.5rem;
  font-size: 1.5rem;
}

<section >
  <div >
    <div >
      <h2 >
        Co mówią o nas klienci:
      </h2>
      <div >
        <div >
          <div >
            <img src="../img/Karolina_Skulska_-1.png">
          </div>
          <span ></span>
          <h4 >
            90% WRACA NA KOLEJNE SZKOLENIE
          </h4>
        </div>
        <div >
          <div >
            <img src="../img/Karolina_Skulska_-1.png">
          </div>
          <span ></span>
          <h4 >
            97% ZAUWAŻA ZDECYDOWANE ZMNIEJSZENIE STRESU ZAWODOWEGO I W ŻYCIU PRYWATNYM
          </h4>
        </div>
        <div >
          <div >
            <img src="../img/Karolina_Skulska_-1.png">
          </div>
          <span ></span>
          <h4 >
            99% POLECA NASZE USŁUGI I DZIELI SIĘ TECHNIKAMI Z BLISKI I PRZYJACIÓŁMI
          </h4>
        </div>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Consider not to use grid in .clients_item_inside.

.clients_item_inside {
    width: 316px;
    max-width: 100%;
}

Here is the example.

CodePudding user response：

In CSS file add following properties to the class .clients_items

align-items: start;
text-align: center;

the style class .clients_items should look like this

.clients_items {
  justify-content: center;
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: flex-start; //new
  text-align: center; //new
}