Ankhena

background-position: center calc(100% + 100px);
https://jsfiddle.net/0206x54g/

Какой способ подключения svg на сайт все же оптимальный?

Высота задается свойствами height, min-height, max-height.

Для дальнейшего обсуждения понадобится ссылка на сайт или https://jsfiddle.net/

Высоту для html задайте

html {
  height: 100%;
}

Можно вообще использовать только position никакого float?

Если что, можно и без float и без position.

Любой из способов по запросу "CSS вертикальное выравнивание"
например,

top: 50%;
transform: translateY(-50%);

Выложили бы свои стили, помощи могло бы быть больше.

Как можно при занесении огромного количества текста избежать прокрутки в бок

Применить форматирование кода (Ctrl+Alt+L или тип того)

при этом получить переносы, которые есть в тексте?

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

.sky-mega-menul:hover {
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.5);
}

https://jsfiddle.net/3vL69tq9/

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

Замените тут ширину на 100%

@media screen and (max-width: 736px)
main.css:1456
select {
    width: inherit;
    margin: 0 0 1% 0;
    padding: 1% 0 1% 2%;
}

1) Важнее отсутствие заголовков с точки зрения структурированной информации, чем с точки зрения валидатора. Валидатору, кстати, без разницы есть у вас h1 и h2 или нет. Если речь не про section и article, да и то это будут уведомления, а не ошибки.

2) и 3) мусор в коде - больше вес страницы, больше времени на загрузку -> минус. Но валидатор снова не при чем.

4) браузер криво отобразит сайт - посетители уйдут - поведенческий фактор -> минус.

Сам фактор валидности сам по себе не играет важной роли. Но если взять два идентичных сайта (в вакууме), то валидный выиграет.

Каждой неделе сделать дополнительную обертку и не изобретать странный велосипед.

https://jsfiddle.net/x4jsur5L/
Чтобы были кругляшки - задайте соотвествующие размеры или вот тут уже используйте ::after, чтобы высота была равна ширине.

https://jsfiddle.net/1fqbgdx5/

.item:nth-child(7n +4), .item:nth-child(7n +5), .item:nth-child(7n +6), .item:nth-child(7n +7)