Дима Паутов

https://jsfiddle.net/dcLhk2pn/

Дальше сами.
А так, какая-то дичь. Просто заюзайте фон. Почему многих людей ставит в ступор подобная вещь. Использование фона как картинки не делает вас плохим, это нормальная практика. Либо вы потратите много времени на эту дичь, либо вы просто заюзаете картинку. Ведь их ещё наверняка придётся адаптировать.

Смысл в этом есть лишь 1 на мой взгляд. Когда эти круги нужно анимировать, тогда да. А просто так, пустая трата времени

Нет, не существует

Как вычислить?

вкладка network, смотрим там на запросы, ищем те, что в ожидании. Так и поймёте. И заодно увидите размеры этих запросов, может картинки огромные, может шрифты, может скрипты, стили, или с чужих сайтов что-то грузится. Причин масса. Изучайте network

Позиция есть, вот только она уже давно включает в себя знания js на начальном уровне и знание jquery по умолчанию, хотя бы на уровне беспроблемного подключения плагинов jquery и дальнейшей работы с ними.
Так же умение подключать библиотеки js, которые не относятся к jquery. Этого достаточно

React.js разработчик - немного некорректное название. Правильно будет Frontend разработчик с знанием React.

Любой фронтенд разработчик должен уметь верстать. Это входит в его обязанности, вы работаете с браузером и js очень часто соприкасается с html и css, а не только работе с данными. В реакте так ещё как, со всеми его styled components и т.п.

Я всегда считал это нормальным и всегда с сеошниками воевал по поводу вообще всех h заголовков. Есть семантика, в которой тоже есть некие правила.

Мой мир SEO оптимизации просто рушится... Мне что, врали

Я думаю, что просто большинство сеошников живёт старыми знаниями и не хотят переучиваться.

Захожу посмотреть, как реализовано это на сервисе от Яндекса - Кинопоиске, они ж явно шарят?!

Конечно шарят, им нужно для поисковика выделить главные заголовки, коих там целая тонна

На самом сайте яндекса точно так же.
У меня версии 2, либо яндекс читерит с своими сайтами для своего же поисковика, либо это просто правильная оптимизация, когда важные части сайта выделены заголовками 1го уровня.

margin/padding - дают отступы, на основе которых сместятся и другие элементы в потоке
position:relative - сместит текущий элемент, но другие элементы в потоке от этого не сместятся

В каких случаях правильнее применять тот или иной способ?

margin - когда нужен внешний отступ
padding - когда нужен внутренний отступ
position:relative - в подобных случаях почти никогда

Почему float внезапно ломает определение блочных элементов

так потому что он делает обтекание элемента. Сначала почитайте про его свойства. Элемент, которому дали float начитает обтикать предыдущий элемент

Ну так у вас

overflow-x: auto;
    overflow-y: hidden;

стоят, они и обрезают. Если они нужны, то нужно сделать так, что бы выпадающий список был отдельным элементом и позиционировался относительно позиции элемента, а не родителя. Так, как это сделано в select2

А так же, если у вас именно такое поведение, вынесите модальное окно и вставьте его перед </body>
Не имейте привычку разметку модального окна bootstrap вставлять где-то внутри контента. Это делается для того, что бы модальное окно всегда могло перекрыть весь имеющийся html.

Т.к. если модальное окно, с z-index: 999999999999999999 будет лежать в родителе, у которого есть position: relative или иной с своим z-index, то z-index модального окна будет плясать относительно родителя

Дайте самому меню скролл и ограничте его максимальную высоту

PNG отображается всегда и везде.
Дайте ссылку на сайт, покажите где эти иконки, по возможности дайте ссылки на сами иконки