Почему не работает flex?

Тимур Турсунбаев, Можете подсказать как можно создать слева отдельную панель как на том сайте?

Почему не работает flex?

Тимур Турсунбаев, Спасибо большое

Почему не работает flex?

Тимур Турсунбаев, в таком случае картинка находится за пределами границы, а мне нужно, чтобы она была внутри border'а

Почему не работает flex?

Не подскажите как расположить картинку слева от теста, как на том сайте?

Как можно сверстать данную секцию?

Можете объяснить свой css код? Многое для меня осталось непонятным в частности
1) Что означает $img-r: 50px; ?
2)

li {
  width: calc(50% + #{$img-r});
  outline: 4px solid rgba(255, 0, 0, 0.2);
  outline-offset: -2px;
  display: flex;
  text-align: right;
  
  &:nth-child(odd) {
    margin-left: auto;
    
    & .item__txt {
      order: 2;
      text-align: left;
    }
  }
}

Здесь вы вставили правила внутри других правил? Зачем это было нужно? Что означает этот & символ?
Что означают эти части кода
width: calc(50% + #{$img-r});

&:nth-child(odd) {

Как поставить по вертикали несколько картинок а текст по бокам каждой из них (Пример на картинке внутри)?

Скорее всего, он так же обучается верстке и смотрел это видео.
Спасибо

Почему не применяется css к html?

Это для всех селекторов?