Верстка шапки fixed как прописать размещение сохраняя гикость?

Question

[usernamesultan]

Интересует "header". Макет:
https://www.figma.com/file/B4xWBRiL1ZuuOuGs79z4Lz/...

что наделал:


Максимум div"ами" собрал их в ряд через float и absolute.
Получилось совсем не гибко, вымерял расстояние через px по 1...
задаюсь вопросами: как сделать это грамотно?
как сохранить пропорции для любого экрана?
Пожалуйста укажите на ошибки, какую логику я упускаю, прокомментируйте в целом проект на что мне опираться.
Основной логикой является, как я понял на данном этапе: всё блоки, размещай контейнер а за ним его содержимое, играя позиционированием.