Ankhena

Вы можете задать высоту (или минимальную высоту) 100vh.

Другой вариант: задавать высоту в %, но у родителя должна быть не нулевая высота. А у body она 0 по умолчанию. Соответственно, сначала нужно растянуть на весь вьюпорт html, затем body и только потом будет от чего считать высоту вашего блока.

раз https://codepen.io/AnnaSummer/pen/KKZKLjy
два https://codepen.io/AnnaSummer/pen/oNpNRrK

У вас два пути:

1. Повысить z-index контенту или просто задать ему position relative (это уже изменит контекст наложения)

2. Но есть более разумный вариант: избавится вовсе от псевдоэлемента и его абсолюта.
А черный полупрозрачный включить в фон всего футера в виде градиента.

background: linear-gradient(rgba(0,0,0, 0.8), rgba(0,0,0, 0.8)), url(../images/services-bg.png) no-repeat  top center/ cover;

Картинка это псевдоэлемент.
Он может быть на десктопах вынут из потока и размещен справа абсолютом.

Либо всё это может быть гридом, который перестраивается как нужно.

Дублировать контент тут точно не нужно.

Slick - устарел.
Он не поддерживает флекс для слайдов.
А это значит, что внутри слайда нужно сделать обертку и задать ей flex.

Если открыть инструменты разработчика, то можно увидеть display у кадров. (И много чего ещё полезного)

Альтернатива: перестать оборачивать картинки в 4 в один слайд, а сделать каждую отдельным слайдом и сказать, что нужно выводить по 4 за раз.

А пойдемте на MDN и посмотрим что там пишут

HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.

Как там может оказаться h1?

Потому что вот так:

.icon-facebook:hover::before{
  color: red;
}

Либо:

.icon-facebook {
  color: #ccc;
}
.icon-facebook::before {
  content: "\e900";
}
.icon-facebook:hover{
  color: red;
}

Как-нибудь так: https://jsfiddle.net/5yxezsd6/

Спрайт должен быть не из symbol, а либо из набора symbol+view+use либо из svg.
Вот пример с вашим флагом и спрайтом из svg.
https://jsfiddle.net/g7t1nf0r/

Хотя последнее время я в большинстве случаев стала инлайнить прямо в css предварительно конвертнув с помощью URL-encoder for SVG

Вам остается только модифицировать и применить к своему случаю.
У вас этот "кусочек" должен быть псевдоэлементом.

Можно ли как-то отменить эту зависимость?

Можно, с помощью свойств align-items или align-self

Зачем там псевдоэлементы?
Просто два фона, один прибит к верху body, другой к низу, остальное цвет.

Множественные фоны пишутся через запятую.

На всякий случай, потому что когда-то вам всё таки придется использовать и псевдо.
Во-первых, отрицательный z-index.
Во-вторых, свойство pointer-events.

Да, берете и засовываете его в data
Вот конвертер https://yoksel.github.io/url-encoder/

Ну уж не колесо, а всего лишь полоса :)

И не правда, полоса прокрутки у вас появилась гораздо раньше, чем были добавлены псевдо.
В тот момент, когда вы задали width: 100vw; для .experts_body.
Зачем?

Отступы у body убираются с помощью обнуления этих самый отступов margin: 0.

Заодно ещё почитайте про box-sizing, тоже скоро пригодится.

Такие вопросы решаются с помощью цветных рамок (outline, outline-offset, box-shadow) для элементов и псевдоэлементов.

Такое ощущение, что вы учитесь на курсах 10 летней давности.

Якоря через ссылки и атрибут name устарели уже очень давно.

Той секции, к которой нужно перейти задается id.
А в ссылке указывается # и этот id.

Куда:
<section id="monday">содержимое блока</section>
Не обязательно section, это может быть table или p или вообще любой другой элемент, к которому нужно прокрутить страницу.

Ссылка:

<a href="#monday">Перейти к описанию понедельника</a>

p.s. обязательно проверяйте свой код валидатором https://validator.w3.org/nu/
Тот способ, которым вы сейчас вкладываете теги друг в друга принесет вам кучу неприятных сюрпризов.

p.p.s называйте классы и id на английском и так, чтобы другому человеку было понятно, что происходит

p.p.p.s ваш редактор похож на что-то типа Front Page не помню какого года. Если это так или просто если ваш редактор устарел, то рекомендую обновить его или заменить на современный. Дело в том, что хороший редактор подсвечивает ошибки и вам же будут удобнее работать.

Z-index в принципе работает не так, как хотелось бы большинству (мне впрочем тоже), потому что существует такая штука как контекст наложения.
https://habr.com/ru/post/166435/
css.yoksel.ru/kontekst-nalozheniya

Чтобы псевдо был под ссылкой, ему нужно задать z-index: -1, а у самой ссылки убрать вовсе.

Потому что ваши блоки называются adv и режутся блокировщиками рекламы.

Гридами https://jsfiddle.net/2z0ohg3k/

Можно задать картинке vertical-align: top
Можно задать ей display: block
Можно обертке font-size: 0 (не люблю такой способ)