Хороший Человек

Всем спасибо!
Решил проблему убрав все типы шрифтов и подключив с google fonts
Правда пришлось все места где прописаны шрифты переписывать, но в итоге все стало круто

может так - Инфа
Если текста не одна строчка, то:

.container{
  display: flex;
  justify-content: center;
  align-items: center;
}

- инфа по align-items

Сохраняйте картинку из фотошопа в 2 раза больше, т.е. была картинка по умолчанию - 200х200 - сохраните ее как image.jpg, а потом еще раз сохраните, но уже с размером 400х400 и назовите например image@2x.jpg. И экраны, у которых высокая плотность пикселей будут использовать именно вторую картинку. Она будет так же отображаться как и обычная, не подумайте. Экраны с такой плотностью пикселей ужимают картинку 400х400 заданную методом ниже, в 2 раза.

<img src="images/image.jpg" srcset="images/image@2x.jpg 2x" alt="img">

Почитать тыц и бац

В основном верстая макет 1920px - все было хорошо и на разрешении 1366*768(мой экран). Медиазапросы использовать приходилось только при 1200px и меньшей ширине.
Как сверстать? - есть такая штука в хроме например:
Для других браузеров тоже найдете. ставите pixelperfect, верстаете, ложите поверх верстки скрин макета и подгоняете, скорее всего на 1366*768 все будет хорошо смотреться, может прям по мелочи поправить что(отступы например).
Макет кстати не такой уж и огромный, сейчас много лептопов с 1920px шириной в разрешении и больше. Маки те же возьмите. Не говоря уже о ПК.

В любом современном браузере есть панель разработчика, там можно открыть свой js код, поставить точки останова и посмотреть шаг за шагом на выполнение скрипта, что куда записывается и как выполняется.
Это опыт, который поможет вам лучше разбираться в коде.

https://learn.javascript.ru/onscroll
Когда проскроллили определённое количество пикселей, то прячем хедер, а если начинаем скроллить вверх то снова показываем.

Отсутствует шрифт на маке значит. Проганяйте шрифт через этот ресурс с нужными начертаниями, подключайте к себе и будет все Оки.

Берите макеты коих море в интернетах и верстайте делая уклон на использование HTML5/CSS3.
И учите js например тут или на торрентах курсы "js essetial" и "js advanced" от ITVDN(ищите через яндекс ;) ). Быстренько основы js пройдите и сразу переходите на изучение использования js в браузере, т.е. использование языка в контексте веба. По малу начнете делать клиентскую логику и уровень верстки качественно повысится через постоянную практику. С таким багажом и постоянной практикой вы будете понимать нравится вам это или нет. Если да, то будете искать способы сделать верстку более интересной, автоматизированной - так вы начнете знакомиться с jQuery, nodejs и сборщиками типа gulp, препроцессорами типа SCSS. В итоге несколько месяцев ежедневной практики и учебы сделают вас начинающим front-end разработчиком - можно пробовать устраиваться junior или фрилансить, и будет что показать заказчику или тому кто будет брать вас в офис. Но если после нескольких дней\недель вам это надоест, не понравится - то стоит задумываться о том что нужно свою жизнь связывать не с IT или попробовать в другой отрасли - разработка ПО например.
Удачи вам!)

Как правильно заметил volkano сначала нужна база, инструменты, с помощью которых вы сможете верстать макеты. То бишь связка html/css ну и по хорошему в сторону javascript посматривать.
Жмяк - сам проходил, интересно и познавательно, а так же в рассылке на почту раз в месяц вроде присылают по 3 макета для практики.
По поводу JS вам сюда, а так же книги издательства O'reilly.
Обучающие материалы приведенные мною - личный опыт и мне подошли, не могу обещать что вам такая форма обучения подойтет, но по интернету обучаещего материала море, гуглите))
Начинать можно с любых макетов, тут уж ваше упорство и усидчивость главное. Хотите и вам это интересно - осилите. Практировался на некоторых макетах из этого ресурса. Вроде там к некоторым макетам так же есть и готовая верстка, в случае чего можно подсмотреть))
Успехов вам!