Свойство 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 в гридах.