どのように行の内側にあるIセンターフレキシボックスアイテムできますか？

ジョアナオリベイラ：

私は、行の中の列を中央にしようとしているが、彼らは中央ではないでしょう。私はすでにコードを複数回変更しようとしましたが、私は、エラーを見つけることができないようです。すでにしようとしたjustify-content:centerとalign-items:centerの両方の「サービス」と「セクション-3」クラスで、それは仕事をしません。私はまた、トップ行の一部である「私は何をすべきか」というテキストを中央揃えすることはできませんよ。

何それが今のようになります。

          <div class="what-i-do">
            <h3>WHAT I DO</h3>
          </div>
          <div class="row services">
            <div class="column">
              <div class="first-column">
                <h3 class="services-title">
                  Content <br />
                  Creation
                </h3>
                <div class="services-text">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                  natoque penatibus et magnis dis parturient montes, nascetur
                  ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                  eu.
                </div>
              </div>
            </div>
            <div class="column">
              <div class="second-column">
                <h3 class="services-title">
                  Strategy <br />
                  Session
                </h3>
                <div class="services-text">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                  natoque penatibus et magnis dis parturient montes, nascetur
                  ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                  eu.
                </div>
              </div>
            </div>
            <div class="column">
              <div class="third-column">
                <h3 class="services-title">Branding</h3>
                <div class="services-text">
                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                  Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                  natoque penatibus et magnis dis parturient montes, nascetur
                  ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                  eu.
                </div>
              </div>
            </div>
          </div>
        </div>

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
  padding: 0 100px;
}
.section-3 {
  background-color: hsla(7, 56%, 85%, 0.746);
  height: 500px;
  width: 100%;
  align-items: center;
}
.what-i-do {
  font-family: "Lato", sans-serif;
  color: white;
  line-height: 1.8;
  letter-spacing: 0.15em;
  text-align: center;
  transform: rotate(90deg);
  padding: 100px 0px 200px 0px;
  font-size: 18px;
  font-weight: 700;

}

.services {
  align-items: center;
  justify-content: center;
}
.services-title {
  font-family: "Ibarra Real Nova", serif;
  align-items: center;
  color: rgba(40, 44, 48, 1);
  font-weight: bold;
  text-align: center;
  font-size: 45px;
}

.first-column {
  width: 250px;
}

.second-column {
  width: 250px;
}

.third-column {
  width: 250px;
}

.services-text {
  font-family: "Lato", sans-serif;
  text-align: justify;
  line-height: 1.8;
  letter-spacing: 0em;
  font-size: 16px;
  font-weight: 300;
}

イシャウッド：

私は表示されないdisplay: flexルールのどこを。彼らはフレックスレイアウトの目的を倒すと、あなたの列の幅を削除し、それに起動します。

.row {
    display: flex;
}

.column {
    padding: 0 20px;
}

.services {
    align-items: center;
    justify-content: center;
}

.services-title {
    font-family: "Ibarra Real Nova", serif;
    align-items: center;
    color: rgba(40, 44, 48, 1);
    font-weight: bold;
    text-align: center;
    font-size: 45px;
}

.services-text {
    font-family: "Lato", sans-serif;
    text-align: justify;
    line-height: 1.8;
    letter-spacing: 0em;
    font-size: 16px;
    font-weight: 300;
}

<div class="row services">
    <div class="column">
        <div class="first-column">
            <h3 class="services-title">
                Content <br />
                Creation
            </h3>
            
            <div class="services-text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                eu.
            </div>
        </div>
    </div>
    
    <div class="column">
        <div class="second-column">
            <h3 class="services-title">
                Strategy <br />
                Session
            </h3>
            <div class="services-text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                eu.
            </div>
        </div>
    </div>
    
    <div class="column">
        <div class="third-column">
            <h3 class="services-title">Branding</h3>
            <div class="services-text">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
                natoque penatibus et magnis dis parturient montes, nascetur
                ridiculus mus. Donec quam felis, ultricies nec, pellentesque
                eu.
            </div>
        </div>
    </div>
</div>