lavezzi1

Вы издеваетесь? У вас background: #242424; указан же!

Подпишись на событие mouseover на nav: https://jsfiddle.net/wxvd4Lg6/

потому что

.logo{
  float: left;
}

https://masonry.desandro.com/

Отправить макет на перерисовку под нормальный размер.

https://codepen.io/pens/

position: fixed;

Если ищите легкий путь - jade, handlebars – императивные шаблонизаторы.
Если более мощный bemhtm – декларативный шаблонизатор.

Полюбому owl-carousel к слайдерам добавляет position: absolute, от этого у тебя и получается что в колонках пустота и они схлопываются.

Обычный самый слайдер на картинке. Просто поменяйте местами arrow и transform: scale(); через css уменьшите все элементы кроме current слайда.

Делай в svg.

Полагаю она прыгает после того как полностью загружается скрипт. То есть становится во всю высоту благодаря скрипту.

1. Минифицировать скрипт.
2. Поставить скрипт на on.load.
3. Сделать на css.

html, body {
height: 100%;
}

.block {
height: 100%;
}

Гуглите по запросу collapse menu. В бутстрапе есть кстати.

Хедер - header
Логотип - logotype
Логотип в хедере - header__logotype (в этой обертке уже блок logotype кладется).

Форма ввода для авторизации .form form_authorization (блок форм с модификатором для авторизации, можно вообще в отдельный блок вынести)
Поле ввода .form__field

Grid Layout - только для прототипов. Для продакшена точно не вариант.

Float & inline-block - верстают МНОГИЕ. Остальная часть на flexbox. Тут от проекта зависит.

1. Хорошая сетка у бутстрапа (можно только ее выдернуть).
2. Сейчас активно пользую Lost grid (flexbox & float).
3. Чисто для flexbox - flexboxgrid.com использовал в продакшене без проблем.