Алексей

Раз есть svg, то использовать только его. Для ширины карты на 100% не использовать блоки ограничители, а вместо этого блок с шириной 100%

И мой вам совет - выкиньте бутстрап. Он подходит лишь для прототипирования или для админок без дизайна. Во всех остальных проектах, у которых есть минимальный дизайн которому нужно следовать - верстка превратится в борьбу с бутстраповскими стилями. На крайняк использовать только сетку и js часть, если есть проблемы с написанием скриптов с 0

Если все же без бустрапа никак - берите .container-fluid и почитайте доку, она есть и на русском

Изучите поведение Флекс элементов. Направления осей. Это поможет вам понять что происходит

left 0, right 0, margin: 0 auto; Надеюсь про position relative не забыли?

Картинка у вас налезает из за position: absolute. Для каких целей оно добавлено?

1. Общий файл стилей либо файл other.scss. Не столь важно ибо на выходе должен быть один файл стилей
2. Для хедера и футера свои файлы header.scss и footer.scss
3. Порядок элементов можно изменить добавив класс с соответствующим свойством нужному элементу например класс с модификатором _order. Модификаторы пишут рядом с основными стилями блока
4. font-size задавайте только там, где меняется шрифт. Если не хотите дублирования используйте extend в scss
5. Я предпочитаю хранить медиазапросы в том же файле где стили блока, в самом конце

В целом это все условности, нужно делать так чтоб бы было удобно и интуитивно понятно потом редактировать не только вам, но и другому человеку

Потому что вы задаете !important body, а не вложенному диву
Измените стили так body>div {color: black !important} тогда сработает

Создайте блоки одинакового размера, эти картинки назначьте им фоном, добавьте свойство background-size: cover;

При клике на блок открывайте полноразмерную картинку в модалке