Mr Crabbz

html, body {
    margin: 0;
    padding: 0;
}
*, *:before, *:after {
    box-sizing: border-box;
}

+ фишка с cover от предыдущего оратора.

media queries загуглите

Потому что margin-bottom вашего заголовка без display:inline-block для ссылки отсчитывается не от края желтой заливки, но от края текста этой ссылки (т.к. элемент строчный). А при inline-block просчет ведется уже от края вашей заливки, т.к. элемент превратился в блочный.

Элементарно проверяется инспектором:

с inline-block:


Без инлайн-блока:

div {
    background-image: url(01.png), url(z.jpg);
    background-size: 100% 100%, cover;
}

Примерно так. Через запятую, в общем.

Так то на расписании нет полосы прокрутки, а контент центрирован относительно ширины вьюпорта. Вот и скачет. Наполните страницу расписания - проблем не будет.

Owl carousel неправильно просчитывает высоту .owl-stage для вашей карусели. Это следствие баганного autoHeight.
Попробуйте принудительно задать высоту для .owl-stage конкретно под это разрешение. Плюс задайте display:none для .owl-controls - вы всё равно его не используете.

Ну вообще, насколько я помню, input не могут содержать :before и :after в принципе, т.к. он не является "контейнерным" элементом.
Скорее всего ранее вы проводили манипуляции с label'aми.

underscores.me

Эталонный говнокод конечно, но исходя из данной вёрстки:
codepen.io/anon/pen/meeKVX