alignement de deux conteneur Flexbox

bonsoir

je continue donc mon aprentissage de flexbox ( je préfere vraiment bootstrap mais imposssible)
donc j ai bien mes deux contenu une image et 3 icones avec du texte de chaque coté de celle-ci
mais impossible de les mettre en meme niveau je veut dire l'un a cote de l'autre je tourne en rond et puis en rond
voici donc mon bout de code

le html

<section id="services">
            <h2>Nos services</h2>

        <hr class="split">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et <br>dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation </p>

        <div class="main_feature"><img src="images/main_feature.png"></div>

        <div class="services-conteneur">

                <!--line-->

            <div class="services-box-texte">

                <div class="centeredIcon">
                    <div class="icon fa fa-chart-line"></div>
                </div>
                    <div class="featureListItem__description">ux design<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap.</div>

            </div> 

                <!--cubes-->

            <div class="services-box-texte">

                <div class="centeredIcon">
                    <div class="icon fa fa-cubes"></div>
                </div>
                    <div class="featureListItem__description">ui design<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap</div>

            </div>

                <!--pie-->
            <div class="services-box-texte">

                <div class="centeredIcon">
                    <div class="icon fa fa-chart-pie"></div>
                </div>
                    <div class="featureListItem__description">seo<br class="box"> The calendar feature makes scheduling a snap.<br>he calendar feature makes scheduling a snap</div>
            </div> 

        </section>

le css

services {
    text-align: center;
}
.main_feature{
    display: flex;
    align-items: center;

}

.services-conteneur{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
}

.services-box-texte {
  display: flex;
  align-items: center;

  max-width: 400px;
  padding: 10px;
}

.centeredIcon {

  display: flex;
  color: #3EADD6;

  flex-direction: column;
  justify-content: center;
  align-items: center;

  border: 1px solid #D7DBDD;
  font-size: 20px;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  box-shadow:
    0 2px 1px rgba(0, 0, 0, 0.05),
    0 2px 3px rgba(0, 0, 0, 0.05),
    0 4px 8px rgba(0, 0, 0, 0.05);
}

j avoue que je ne comprend pas bien pour quoi j ai beau tournée les parametre dans tout les sens mais la je sais plus
bon cela ne fais que 4 jours que je me suis mi a flex afin de le comprendreet il est vrai qu'il y a d autre propriété de flex que je n utilise pas

un petit coup de main n'est pas de refus

cordialment