Ксения Михайлова

Контент в .header выходит за его границы и растягивает этот блок.

.header {
    overflow: hidden;
}

Я пользовалась skrollr https://github.com/Prinzhorn/skrollr#relative-mode...

В этом месте шаблона вручную обрезать описание чем-то вроде substr php.net/manual/ru/function.mb-substr.php (ну или можно разбивать на массив по пробелам, отрезать длину, и обратно склеивать в строку)

Возможно, стоит запретить поведение по умолчанию для формы?
$("#form").submit(function(e) {e.preventDefault()}

Во-первых, подключить бутстрап.
Во-вторых, можно использовать его компоненты.
Если так хочется своих, то, действительно: inline-block для li и text-align: center для контейнера ul https://jsfiddle.net/18hd2zko/6/

:focus {
    outline: none;
}

С помощью svg можно так (только исходная картинка должна быть с прозрачными областями) https://codepen.io/aarizona/pen/zqQEMo?

Этот блок расположен под шапкой, а над сайдбаром шапки нет. Вот эти 50 пикселей и торчат вниз.

.profile-favorites {
    height: calc(100% - 50px);
}

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

Все зависит от того, с помощью чего у вас сделан сайт.
Нужно брать адрес страницы из переменной $_SERVER и сравнивать с тем, что у вас в меню.

Сделать выходящее за пределы блока изображение с помощью фона нельзя. Только располагать отдельным элементом, и позиционировать.

Попробуйте для списка растягивание содержимого по ширине:

#types .types-list {
    text-align: justify;
    text-align-last: center;
}

After-элемент с градиентой заливкой