Как сверстать шапку с лого посередине?

Если я правильно понял

дели меню на две части.
и просто расставляй элементы друг за другом как надо.

Просто будет у тебя два одинаковых блока (одинаковая структура и классы)

можно сделать двумя колонками с достаточно большим зазором между ними.

Проблема решений выше в том, что они не учитывают, что лого выходит за пределы шапки. Хлебные крошки находятся в теге main. Соответственно, твоё лого должно быть за пределами тега header, скажем, аккурат после открываюшего тега body. Боди должен иметь position: relative, а лого - position: absolute; left: 50%; transform: translateX(-50%);
Вёрстку шапки делается изи на флексбокс: 5 колонок налево, 5 направо, а родителю этих колонок justify-content: space-between; К примеру, если взять сетку из bs4, то будет так:

<div class="row justify-content-between">
  <div class="col-lg-5"></div>
  <div class="col-lg-5"></div>
</div>