Как сверстать такой header?
по правой и левой части, думаю, что это все же дизайнерский промах ибо никакой нагрузкой и творческим высером дизайнера тут и не пахнет. На счет центра, так вынеси это отдельным блоком с этим бэкграундом и задай позиционирование относительно хедера. либо оверфлоу визибл дай хедеру, что б показывались все вылезающие за его границы элементы. а вообще вот ссылка на этот макет в рабочем варианте https://online.rdb.ru, открой инспектор и позыркай как там и что, но стороны все же одинаковые :)
Здесь в принципе только ого можно оставить картинкой или в svg перевести
Остальное с помощью css псевдоклассами и бордерами
По высотам - padding и позиционирование