Почему при адаптиве налазят блоки друг на друга?

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

Спасибо!!!     А почему в этом задании перезаписав значение  для псевдоэлемента after на то что ниже по коду, он перекрыл другой псевдоэлемент before, соответственно убрав половину видимой области этого псевдоэлемента. Почему, например, не before выше чтобы перекрыть after?

Спасибо

Здравствуйте. Не обязательно делать одну линию через 3 блока. Можно её реализовать как отдельный блок, конфигурируемый, с точкой. Позиционировать в рамках каждого блока-родителя