Help with flex, content not being distributed?

Question

css

I may be missing something, but why doesn't flex work for me?
https://codepen.io/ilq-filimonow/pen/qBBLpjQ

<div class="about__items">
        <div class="about__item">
          <img src="img/about-2.png">
          <div class="about__item-title">
            Адвокатское сопровождение
          </div>
          <div class="about__item-text">
            Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
конфиденциальности.
          </div>
          <div class="about__item-btn">
            <a class="about__item-link" href="#">Подробнее</a>

            <a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
              Заказать
            </a>

          </div>
        </div>
      </div>
      <div class="about__items">
        <div class="about__item">
          <img src="img/about-2.png">
          <div class="about__item-title">
            Адвокатское сопровождение
          </div>
          <div class="about__item-text">
            Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
конфиденциальности.
          </div>
          <div class="about__item-btn">
            <a class="about__item-link" href="#">Подробнее</a>

            <a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
              Заказать
            </a>

          </div>
        </div>
      </div>
      <div class="about__items">
        <div class="about__item">
          <img src="img/about-2.png">
          <div class="about__item-title">
            Адвокатское сопровождение
          </div>
          <div class="about__item-text">
            Мы гарантируем полное профессиональное обслуживание клиентов в заявленных сферах деятельности и соблюдение 
конфиденциальности.
          </div>
          <div class="about__item-btn">
            <a class="about__item-link" href="#">Подробнее</a>

            <a href="#" data-fancybox data-src="#modal" href="javascript:;" class=" default-btn">
              Заказать
            </a>

          </div>
        </div>
      </div>

.about__items {
    display: flex;
    justify-content: space-between; }
  .about__item {
    max-width: 300px;
    text-align: center; }

Answer 1

If you need these three blocks to line up, then give them a parent and display: flex;
If you need to line up inside each block, then set display: flex to this .about__item class