r_r_r_r_r

Судя по скрину оно во всю ширину) Просто нужно убрать отступ сверху

.header__logo {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

Здесь margin нужно заменить на padding и все:

.header__logo {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

Свойство gap работает не так как надо

На обоих скриншотах одинаковый gap и по виду очень похож на указанные 30px.
А больше он ничего не делает.

Но предположим, что вы хотели спросить не про gap, а про почему не получилось два столбца.
Теперь смотрим в код (было бы идеально, если бы к коду прикладывалась песочница, в которую можно потыкать, а эти простыни убирались в спойлеры).
Вы пишете: хочу флекс, по строкам, если не влезло, то переноси и сделай отступы (этот ваш gap) 30px.
Смотрим на элемент: ширина 555px.
Смотрим на контейнер: ширина 1140 и отступы 2х15.

Считаем:
Свободное место в контейнере: 1140 - 30 = 1110.
Сколько нужно места хотели бы занять два элемента в ряду: 555х2 + 30 = 1140
=> Не влезает.

А раз не влезает, то переносим.

Нормальное решение:
Меняем флекс на грид и задаем две колонки с нужным отступом.

grid-template-columns: 1fr 1fr;
gap: 30px;

Дополнительно можно почитать про minmax в гридах.