Добрый день. Подскажите пожалуйста, как расположить карточки в ряд

.section-app {
  padding-bottom: 80px;
}

.name-app{
  text-align: center;
  font-family: "MYRIADPRO-REGULAR",Arial, sans-serif;
  margin-top: 106px;
  color: #333b42;
}

.text-app {
  text-align: center;
  margin-top: 36px;
  color: #74797e;
  font-size: 14px;

}
.cards {
  padding-top: 40px;
  padding-bottom: 150px;
}

.track{
  width: 190px;
  display: inline-block;
}

.track:nth-child (2) {
  margin-left: 200px;
}

.track:nth-child (3) {
  margin-left: 100px;
}

.track:last-child {
  float: right;
}

.round {
  text-align: center;
  border-radius: 50%;
  width: 136px;
  height: 136px;
  background: #8500d2;
  margin-right: auto;
  margin-left: auto;
}

.track-img {
  position: relative;
  width: 53px;
  height: 43px;
  top: 44px;
}


.track-name{
  text-align: center;
  font-family: GothemB,Arial, sans-serif;
  font-size: 17px;
  color: #333b42;
}

.track-text {
  text-align: center  ;
  color: #74797e;
  font-size: 14px;
  font-weight: 25;
}

.ellipse-pirp {
  width: 140px;
  position: relative;
  left: -2px;
}
<section class="section-app">
  <div class="container clearfix">
      <h2 class="name-app">FEATURES OF APP</h2>
      <p class="text-app">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut <br> labore et dolore magna aliqua.
      </p>
      <div class="cards clearfix">
          <div class="track">
              <div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
              <h3 class="track-name">Lorem ipsum dolor sit</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud 
              </p>
          </div>
          <div class="track">
              <div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
              <h3 class="track-name">ametconsectetur</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud 
              </p>
          </div>
          <div class="track">
              <div class="round">
                  <img class="track-img" src="img/Shape%[email protected]" alt="">
              </div>
              <h3 class="track-name">Lorem ipsum dolor sit</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud 
              </p>
          </div>
          <div class="track">
              <div class="round">
                  <img class="track-img" src="img/Shape%[email protected]" alt="">
              </div>
              <h3 class="track-name">Lorem ipsum dolor sit</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud </p>
          </div>
      </div>
  </div>
</section>


Ответы (1 шт):

Автор решения: InDevX

Так?

.section-app {
  padding-bottom: 80px;
}

.name-app{
  text-align: center;
  font-family: "MYRIADPRO-REGULAR",Arial, sans-serif;
  margin-top: 106px;
  color: #333b42;
}

.text-app {
  text-align: center;
  margin-top: 36px;
  color: #74797e;
  font-size: 14px;

}
.cards {
  padding-top: 40px;
  padding-bottom: 150px;
  display: flex;
  justify-content: center;
}

.track{
  width: 190px;
  display: inline-block;
}

.track:nth-child (2) {
  margin-left: 200px;
}

.track:nth-child (3) {
  margin-left: 100px;
}

.track:last-child {
  float: right;
}

.round {
  text-align: center;
  border-radius: 50%;
  width: 136px;
  height: 136px;
  background: #8500d2;
  margin-right: auto;
  margin-left: auto;
}

.track-img {
  position: relative;
  width: 53px;
  height: 43px;
  top: 44px;
}


.track-name{
  text-align: center;
  font-family: GothemB,Arial, sans-serif;
  font-size: 17px;
  color: #333b42;
}

.track-text {
  text-align: center  ;
  color: #74797e;
  font-size: 14px;
  font-
<section class="section-app">
  <div class="container clearfix">
      <h2 class="name-app">FEATURES OF APP</h2>
      <p class="text-app">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut <br> labore et dolore magna aliqua.
      </p>
      <div class="cards clearfix">
          <div class="track">
              <div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
              <h3 class="track-name">Lorem ipsum dolor sit</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud 
              </p>
          </div>
          <div class="track">
              <div class="round"><img class="track-img" src="img/Shape%[email protected]" alt=""></div>
              <h3 class="track-name">ametconsectetur</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud 
              </p>
          </div>
          <div class="track">
              <div class="round">
                  <img class="track-img" src="img/Shape%[email protected]" alt="">
              </div>
              <h3 class="track-name">Lorem ipsum dolor sit</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud 
              </p>
          </div>
          <div class="track">
              <div class="round">
                  <img class="track-img" src="img/Shape%[email protected]" alt="">
              </div>
              <h3 class="track-name">Lorem ipsum dolor sit</h3>
              <p class="track-text">
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
                  nostrud </p>
          </div>
      </div>
  </div>
</section>

Для .cards добавил всего 2 стиля - display: flex; justify-content: center; (почитать про flex -> CSS flexbox). По-хорошему, вам всё переверстать нужно, float'ы неактуальны уже приличное время, всё без них красиво и качественно сделать можно. И советую посмотреть в сторону уже готовых библиотек, аля bootstrap

→ Ссылка