TheRevan

Это изза трансформирования befor...
Смотри

У тебя у li стоит паддинг:


Вариантов 2
1 - убирать паддинг с лева и с права и давать фиксированную ширину li
2 - переверстать меню на flex-box:
.top-menu-list{
display:flex;
justify-content: space-between;
align-items: center;
}
заранее также убрав у li паддинг

потому что включен перевод страницы и он ломает скрипты

Удобство для себя = без сетки, без фремворка(кроме бекенда, там намного проще и лучше делать с фреймворком), с использованием БЭМ + любой препроцессор и настроенный проект через gulp

Проблема с элементом:
p.border{
}
- он вылезает за границы экрана
Вот смотрите:

Единственное что приходит на ум это text-indent с отрицательным значением, но один фиг br вставить нужно будет
Пример: https://codepen.io/anon/pen/oEedYb

Тут есть 2 варианта:
1 - сделать для : .header__nav-items эту тень и убрать тень у .header__shadow:after
2 - сделать .header__shadow position:relative и background-color: #fff

Grid пока не советую использовать, еще не везде работает. Но верстать нужно на флексах сейчас: https://www.youtube.com/watch?v=7Lg-438gAc8&list=P... неплохие уроки по флексам