Header only with html and css?

Question

[Ruslan]

Как правильно сделать оформить header используя только html и css чтобы получилась как на этом макете


Почему у меня правое меню постоянно плавает и как кнопку поиска правильно спозиционирорвать в самой форме чтобы она никуда не уезжала? Что не так в моем коде? https://jsfiddle.net/kjgydnfs/27/

Comments

[Ankhena]

Как-то так https://jsfiddle.net/emnov48z/

Answer 1

[Yupiter7575]

Проблема в пропорции. Вы выстраиваете элементы по px а правильная верстка это %

Answer 2

[Elena Fire]

Согласна с Yupiter7575 - смысл задавать max и min-width, когда внутри все в жестких px?
Зачем делать кнопку поиска псевдоэлементом? Нормально ее пропишите в своем контейнере, никуда убегать и не будет. Поработайте с @ media - постройте правильные размеры и положение иконок и подписей в правой стороне. Длина поля поиска не уменьшается - а ведь при уменьшении ширины экрана должна вообще уходить во всплывающее поле.