Почему при просмотре с мобильных и при приближении фон хедера обрезается и само меню немного сдвигается вправо?

Верстаю свой первый сайт и возникла проблема с хедером, фон хедера обрезается при просмотре с мобильных, само меню сдвигается вправо и появляется скролл. Пробовал исправлять сам, у меня получилось что хедер оставался по центру, изменял свой размер и фон не обрезался (пробовал менять max,min width) но user panel (Жёлтый блок) скатывался вниз под меню навигации и не держался на одной линией с навом. Скинул версию кода до моих исправлений.

https://codepen.io/JustStone/pen/NeQOZq