Смысл использовать теги main, footer и header?

Александр Васильев,

пока на мобильных это не будет жестким правилом - нет смысла

Что?

Что должно быть в современном eCommerce приложении?

Но какими функциями должен обладать современный онлайн-магазин?

Вы ничего не выбирали и не заказывали в онлайн-магазинах?
Серьезно?

Тогда попробуйте и узнаете ответ на свой вопрос.

Как сделать задний фон?

Варианты зависят от адаптива.
Если сайт полностью адаптивен, типа в vw, то соответственно, задали размеры в vw и погнали. Скорректировали, если на каких-то вьюпортах вышло не симпатично.

Если нет.
То из макета нужно экспортировать необрезанную картинку. Т.е. чтобы на больших экранах этот условный "эллипс" как-то логично завершался справа. Сколько влезет.
И позиционируете от центра через calc.

Как поменять всё же цвет в моём случае?

Было бы лучше, если был бы скрин того, что вам нужно. Потому что комбинация с rgba(0, 0, 0, .3) не однозначна.

А то ответ будет дурацким: background-color: #484848 или background: #484848

Вопрос по поводу размещения сайта?

Вопрос: Что делать?

Обычно читать инструкцию хостера и сравнивать то, что там написано с тем, что вы сделали.
Если вы уверены, что сделали всё по инструкции, можно написать в поддержку.

Из вашего вопроса не понятно что вы имеете в виду под "создал сайт" и как и куда вы его загрузили.
Одновременно сообщение про Github и SQL вообще вызывают подозрения о какой-то большой каше.

Почему едет верстка сайта?

Добавьте в header контейнер-центровщик. Или его класс.
Можете погуглить по запросу типа "контент по центру, фон по ширине".

Иииии... много вопросов по вёрстке. Например, почему ссылки в меню у вас сделаны заголовками, а не <a>? Почему иконка телефона контентная? Ну и всё такое по семантике. И валидатор не игнорируйте.

Как разместить контент в пределах высоты экрана?

Гуглите типа "Проблемы 100vh на мобилках"

Как сделать кастомную пагинацию на плагине swiper js?

serrrezhka, аналог https://webformyself.com/sozdanie-hover-effekta-s-... (второй результат из гугла)

Как можно расположить за границей контейнера логотипы?

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

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

Как сделать кастомную пагинацию на плагине swiper js?

Уточните что именно вы делали и что не получилось.
Желательно кодом на codepen.io

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

Bjorund ау?

Как автоматически подогнать размер шрифта, чтобы он полностью заполнял контейнер и зависел от высоты контейнера?

Хотя бы как это применить, чтобы вписался во вьюпорт и условно полностью занял его?

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

Так кнопки будут разной высоты, а не на одном уровне.

Как добиться нормального отображения теней при наличии скролла?

Как добиться нормального отображения тени?

Задавать высоту обертки больше чем дети, чтобы тень поместилась.

Возможно как-то "приклеить" элементы верстки к картинке?

Реально ли, на любом устройстве сохранять правильное, "приклеенное" положение кружочков на картинке?

Да, реально, для этого придумали проценты.
https://codepen.io/AnnaSummer/pen/QWQOvzy
https://codepen.io/AnnaSummer/pen/eYVeWXR

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

Евгений Залецкий, кого простите через инлайн блок сделать? Кнопки на одном уровне расположить инлайн-блоками? Покажите, пожалуйста?

Почему расширяет блок под себя?

Картинку абсолютом и object-fit

Как сделать такой хедер c картинкой?

Только это не .logo
Но суть верная.

Под элементом грид сетки появляется пустое пространство. Как исправить?

https://codepen.io/AnnaSummer/pen/BarLdyO

Это ваш код.
Приведите его, пожалуйста, в такой вид, чтобы можно было увидеть проблему и понять как её решать.

Вероятнее всего родитель растягивается какими-то силами, например, флексом или гридом родителя.

Где найти такой виджет для вебсайта?

https://yandex.ru/dev/share/

Проще самостоятельно сделать.