Ankhena

Подчеркивание делается либо одним псевдоэлементом или вообще без них
https://jsfiddle.net/fzhec4bo/

Непосредственно на флексах.

direction:columns;
flex-wrap: wrap;
максимальная высота;

https://codepen.io/anon/pen/OdrqoR

Cosmonaut ., одинаковые шрифты подключаются с одним именем, различающуюся жирность и стиль пишут в font-weight и font-style.

Для современных браузеров нужны форматы woff2 и woff.

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensans.woff2") format("woff2")
            url("fonts/opensans.woff") format("woff") ;
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "OpenSans";
    src: url("fonts/opensansbold.woff2") format("woff2"),
            url("fonts/opensansbold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

Ну и зачем вы собрались делать однотонные картинки с помощью img?

Это список, у него квадратики в ::before. Перед списком заголовок, у него тоже ::before, только синий.

https://jsfiddle.net/j0auve6m/
Отступы, размеры, цвета дорисуйте самостоятельно.

И вообще надо ли задавать фиксированную высоту блокам?

Зависит от макета и задумки дизайнера.
В большинстве случаев желательно обходится без указания высоты или задавая минимальную/максимальную.

Но как решить данную проблему?

Если header должен быть именно 100vh, то и размер шрифта пересчитать в единицы измерения связанные с вьюпортом. (Только обязательно проверяйте на больших и маленьких размерах окна, обычно там нужно менять размеры через media, чтобы не получить гигантов и мини-карликов)

Не скачивала полный макет, а только смотрела превью, но ширина макета у вас не 1920. Это только дизайнер показал, как все должно выглядеть, например, на 1920.
Посмотрите внимательно: есть фиксированная контентная ширина, а все что выходит за нее должно быть растянуто на всю ширину окна браузера, любую.

Так что на 1600 (да и на 1200 тоже) у вас не должно быть никакой горизонтальной полосы прокрутки.

Открываете инструменты разработчика (ctrl + shift + i или F12) тыкаете в нужный элемент и смотрите что у него там в стилях в свободном состоянии и при фокусе.

А там: фон градиентом и у него меняется размер при фокусе
https://jsfiddle.net/vew59xcs/

Вы можете вставить в content прямо код svg. Только предварительно нужно прогнать его через конвертер, например https://websemantics.uk/tools/svg-to-background-im...

И задавать размер как обычному svg через width и height.

Оригинал вашего градиента выглядит так:

background: linear-gradient(to top, #ffea00,#ffd000 85%, #ffd900);

Дальше берете автопрефиксер, вставляете туда оригинал, устанавливаете какие браузеры собираетесь поддерживать и получаете результат.

Не оттуда пляшете.

Давайте я вам как девочка девочке всё объясню. На примере джинсов.
Есть такая штука мода. Сейчас в обтяжку, раньше клеш или широченные. Но при этом всегда остаются люди предпочитающие классику или консерваторы, которые предпочитают даже слегка устаревшую классику.

Так вот, с сайтами аналогичная история.
10 лет назад считалось, что шрифт 14px это гигантомания и использовали 10 или 12. Между строчками крошечные отступы. Особо нерадивые даже между абзацами пытались не делать пустых строк.

Есть мода и восприятие пользователем современных сайтов. То, как хочется видеть именно сейчас. Изменяются даже пропорции и зависимости.
96 это точно такое же красивое число как 100. Это 16*6. А 16 это стандартный размер шрифта основных браузеров.

Кроме этого есть аспекты адаптивности.
И правильно не ширина кнопки равна 100 или 96px, а ширина кнопки это ширина текста плюс отступы. И хорошо бы, чтобы эти отступы были пропорциональны размеру шрифта, а не кратны 5px. Вы поставите отступ четко 20px, а пользователь поставит в настройках браузера шрифт 150%. И получится куцая кнопка с некрасивыми маленькими отступами.
При этом не все элементы должны быть кратны размеру шрифта, какие-то имеют другие зависимости.

Другой вариант, пропорции относительно размеров экрана или блока. Например, кнопка должна занимать всю ширину блока или половину. Если текст не помещается, то переносится.

Поэтому, хороший дизайнер либо сопровождает работу верстальщика, либо пишет сопроводительное письмо с указанием зависимостей, либо и то и другое.

И да, дизайнер может четко сказать, что справа отступ 19px, а слева 17, потому что визуально (например, из-за особенностей шрифта) получается ровно. Если это проблема для верстальщика, то не надо работать с таким верстальщиком.
Верно и в обратную сторону, если дизайнер нагородил какую-то невменяемую конструкцию из-за которой прибавляется лишняя 1000 строчек кода, то имеет смысл обсудить целесообразность ее использования с самим дизайнером и заказчиком.

Про вклад заказчиков в дизайн, я думаю, вы и сами знаете. У них особенное чувство прекрасного, хорошо, если просто консерватор из первого абзаца.

Писать зависимости от this
Заменить $('.sub-menu').toggle(); на $(this).children('.sub-menu').toggle();
https://jsfiddle.net/ta136ogu/

Это делается флексами, за порядок элементов отвечает свойство order.
вот так https://jsfiddle.net/38zvd5Ls/

p.s. еще можно гридами, тогда и вначале без флоатов будет хорошо.

p.p.s. фу-фу так делать:

* {
  margin: 0px;
  padding: 0px;
}

Если непрозрачная, то белыми псевдоэлемнтами.
Если прозрачная, то верхняя граница это не граница, а фоновый градиент в 1 точку высотой.