Несколько вопросов по верстке заголовка лендинга. Как сверстать меню?
У вас разметка html хромает. Пропущен открывающий тег nav
Картинки внутри тега ul
Что это такое ....? ((<img src="images/1) header/shopping-cart-menu.png" id=cart_icon height="15" width="18"/>
<img src="images/1) header/magnifying-glass-menu.png" id=glass_icon" height="18" width="18"/>
images/1) header/shopping-cart-menu.png - впервые вижу такой путьid=cart_icon height="15"
Вам не кажется, что пропущены кавычки ?
В CSS что-то такое страшное, что в fiddle ничего не работает )
https://jsfiddle.net/ouodkeLn/204/
Это что касается выравнивания меню по центру
Завязывайте с флоатами. Верстайте с помощью flex. По дороге изучайте гриды. 
1. Итак, display:flex;
justify-content: space-between;
https://html5book.ru/css3-flexbox/ 
2.justify-content: space-between;
3. align-items: center;
4. эмммм... border-color? В чем сложность?
Можно псевдоэлементом еще, если полоска уже, чем текст.