Александр Цымбал

хэдеру position: fixed; top: 0; left: 0; width: 100%;
футеру position: fixed; bottom: 0; left: 0; width: 100%;

и у .article надо padding-top и padding-bottom задать для компенсации высоты хэдера и футера, чтобы содержание не "пряталось" за ними.

А вообще, надо понимать контекст задачи. Видеть макет. Потому что фиксированный футер - это редкость. Только если что-то типа мессенджера верстается, где в футере поле для ввода текста всегда должно быть видно.

https://codepen.io/tsymbal_su/pen/QWmvdKj?editors=1100 вот такое решение примерно подходит?

При наведении используйте отрицательный margin и увеличенный на это же значение padding
https://codepen.io/tsymbal_su/pen/xxWdEQx

Долго гуглил на эту тему, в том числе и на английском. Информации, почему-то, нет.
Полез смотреть, как реализованы svg-иконки на крупных сайтах. И на абсолютно всех крупных сайтах иконки задизайнены так, что имеют небольшой зазор относительно краёв viewBox. Так же задизайнены и вот эти иконки, например https://heroicons.com/ .
Что касается решения моей проблемы, я не стал перерисовывать все иконки, а просто поправил viewbox. Иконки у меня в проекте разношерстные и пиксельперфект не так важен. Принцип заключается в следующем: viewbox, как мы знаем, описывает координаты левой верхней и правой нижней точки обрезки. Всего 4 числа, вроде: "0 0 512 512". Увеличим область просмотра на 5-10% (или на половину толщины линий в иконке). Например, у иконки с viewbox="0 0 100 100" устанавливаем viewbox="-10 -10 120 120" (т.е. добавили с каждого края по 10 единиц). Этим мы как бы уменьшим масштаб иконки в рамках viewbox'а, отодвинув края рисунка от краёв viewbox'а.

И проблема решена! Надеюсь, кому-то еще пригодится.

У обертки текста, который перекрывает иконку, нужно добавить CSS свойство pointer-events: none; - это правило нужно в ситуациях, когда какой-то элемент должен присутствовать на странице, но события мышки (наведение, нажатия) проходили его насквозь, до слоя, находящегося под ним.

https://jsfiddle.net/yu5dat2L/1/ - в этом случае добавил pointer-events к селекторам .thumbs:before (градиентная черная плашка) и .thumbs .caption (текст поверх).

1. проверьте, стоит ли у вас в браузере масштаб 100% (если нет, то установите на 100%)
2. проверьте, используете ли вы свойства трансформации css (даже у родительских элементов) - имеется в виду transform: ... (если да, то пробуйте обойтись без них)
3. проверьте изображения, может быть они так "нарезаны", что по краям появились полосы. (если полосы есть, то обрежьте картинки заново)
4. проверьте, используются ли изображения в 100% масштабе. Судя по css, который вы привели в качестве примера, вы используете относительное расположение бэкграундных картинок (75%). Проверьте, какое число получается в вычесленных стилях (computed styles), если дробное - то, вполне возможно, эти доли пикселя и создают такое чудо.
...если ничто из вышеперечисленного вас не касается, то...
4. у хрома достаточно кондовый графический движок: он съедает пиксели у мелких svg-иконок, округляет дробные значения, и т.д. Всё ради быстроты отрисовки - поэтому некоторые и называют хром самым быстрым браузером (новый firefox объективно быстрее). Но когда-то благодаря такому подходу хром и получил большую популярность (еще благодаря беспощадному маркетингу google). Пробуйте отказаться от текущего подхода, смотрите в сторону использования не растровых картинок, в svg, или банально блоков с css трансформациями.

У вас в main.js есть скрипт, который при ширине экрана 1185px и выше немного меняет верстку (добавляет svg и т.д.). А в CSS-файле правила для этих элементов срабатывают только при ширине экрана 1200px и выше. Поэтому решения 2:
1. в css-файле заменить участки кода вида:

@media (min-width: 1200px) {
    .services__list-menu,.services__profile {
        display:none
    }
}

на

@media (min-width: 1185px) {
    .services__list-menu,.services__profile {
        display:none
    }
}

(для остальных неправильно работающих элементов тоже нужно заменить значение min-width с 1200 на 1185)

2. в js-файле main.js (что лежит в шаблоне) найти и заменить совпадение "1185" на "1200". Но это более костыльный вариант, т.к. с этим значением работает целый плагин.

Изобретать велосипед не надо!
kenwheeler.github.io/slick + jquery - И забудьте о подобных вопросах.
jquery вы в любом случае подключите. Не сегодня так завтра. Всё и все работают на нем.