How to arrange blocks correctly?

Question

Less

Hello! Need help.
there is such a block:

while I am at this stage:

here are the pieces of code:

<section id="franshiza">
    <div class="resize">
      <h2>Франшиза включает в себя</h2>
      <ul>
        <li>
          <p>Помощь в <span>выборе помещения</span></p>
          <div class="pointer">
            <img src="">
          </div>
        </li>
        <li>
          <div class="hands">
            <img src="">
          </div>
          <p>Помощь в проведении <span>переговоров с арендодателем</span></p>
        </li>
        <li>
          <div class="brush">
            <img src="">
          </div>
          <p><span>Дизайн-проект</span> Вашего магазина</p>
        </li>
        <li>
          <div class="box">
            <img src="">
          </div>
          <p>Централизованные <span>закупки оборудования</span> у наших поставщиков</p>
        </li>
        <li>
          <div class="galstuk">
            <img src="">
          </div>
          <p><span>Обучение и тренинги</span> для Ваших сотрудников</p>
        </li>
        <li>
          <div class="puzzle">
            <img src="">
          </div>
          <p>Помощь в <span>разработке ассортиментной матрицы</span> при открытии магазина</p>
        </li>
        <li>
          <div class="calendar">
            <img src="">
          </div>
          <p>Ежегодное <span>полное обновление коллекций</span></p>
        </li>
        <li>
          <div class="sale">
            <img src="">
          </div>
          <p><span>Мерчендайзинг</span></p>
        </li>
        <li>
          <div class="track">
            <img src="">
          </div>
          <p><span>Доставка</span> изделий <span>за наш счет</span></p>
        </li>
        <li>
          <div class="manager">
            <img src="">
          </div>
          <p>Персональный <span>менеджер-куратор</span></p>
        </li>
        <li>
          <div class="network">
            <img src="">
          </div>
          <p><span>Консалтинг</span> по всем аспектам ведения бизнеса</p>
        </li>
        <li>
          <div class="printer">
            <img src="">
          </div>
          <p><span>Все модели из последних трендов</span></p>
        </li>
      </ul>
    </div>
  </section>

and styles:

#franshiza {
  width: 100%;
  background: top center url(../images/bg_2.jpg) no-repeat;
  background-size: cover;
  height: 2862px;
  position: relative;
  h2 {
    color: #303445;
    font-family: 'Scada', sans-serif;
    font-size: 55px;
    font-weight: bold;
    line-height: 45px;
    text-transform: uppercase;
    padding-top: 60px;
    text-align: center;

  }
  ul {
    li {
      display: flex;
      position: relative;
      height: 230px;
      &:nth-child(odd) {
        padding: 20px 250px 20px 20px;
        text-align: right;

      }
      &:nth-child(even) {
        padding: 20px 20px 20px 250px;
        text-align: left;
      }
      div {
        &:nth-child(odd) {
          content: "";
          left: 0;
          top: 0;
          width: 215px;
          height: 215px;
          border: 2px solid #5e7693;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
        }
      }
      div {
        &:nth-child(even) {
          content: "";
          right: 0;
          top: 0;
          width: 215px;
          height: 215px;
          border: 2px solid #5e7693;
          border-radius: 50%;
          display: inline-block;
          position: absolute;
        }

      }

      p {
        font-size: 28px;
        line-height: 25px;
        color: #3a3f52;
        font-weight: 400;
        padding-top: 100px;
        span {
          font-weight: 700;
        }
      }
    }
  }
}

I can’t understand why the styles about all the extras don’t work and don’t arrange them as needed? only works on the first two.