Как я могу центрировать элементы flexbox, которые находятся внутри ряда?

Question

Я пытаюсь центрировать столбцы внутри ряда, но они не будут центрироваться. Я уже несколько раз пытался изменить код, но не могу найти ошибку. Уже пытались justify-content:center и align-items:center в классах "services" и "section-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;
}

Answer 1

в row-services {display: flex; justify-content (попробуйте также элементы): center;}

Трудно сказать, куда все идет, но попробуйте.

Answer 2

Оба align-items:center и justify-items:center работают в сетке CSS. Вероятно, ваша проблема связана с другими CSS, влияющими на высоту / ширину сетки, или с размещением самого правила стиля display:grid:

html, body{height: 100%}

.grid{
    height: 60%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: salmon;
    align-items: center;
    justify-items: center;
}

<div class="grid">
    <div>Lorem ipsum</div>
    <div>Lorem ipsum lorem ipsum</div>
</div>

Answer 3

Я нигде не вижу правила 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>