Вадим Белкин

Он у вас 100%, как и body. Они растягиваются по ширине окна браузера. Но в контентной части у вас блоки вылазиют за пределы экрана. По этому на телефоне страница с уменьшенным зумом, и как раз видно разницу, на которую выступает контент. Обрезайте/обжимайте контент, чтобы за границы окна не выходил.

Посмотрите реализацию сетки в популярных фреймворках. Bootstrap, semantic UI, uikit, foundation и т.д. Везде за счет ширина в процентах и padding сетка делается.

Notepad++ простой, быстрый редактор. Поиск и замена в одном или множестве файлов, как открытых, так и в указанной папке

Bootstrap это по сути набор готовых UI элементов, плагинов для них же, который используют чтобы не тратить время на создание с нуля UI элементов. Для начала ознакомьтесь со структурой всех элементов, от простых кнопок, иконок и полей, до более объёмных, вроде модальных окон и т.п., как их можно совмещать, модифицировать классами, компоновать с помощью сетки и т.д. И в процессе при необходимости изучите и сами js плагины для управления этими же UI элементами.

Да, сетка отлично подходит для размещения модульных блоков UI веб страницы, которые растягиваются или выравниваются по ячейкам сетки. Чтобы с пользой её использовать, макет шаблона должен быть нарисован под сетку (если делаете по макету), бывает что некоторые элементы по макету нарисованы так что не умещаются в мелкую ячейку, но не позволяет их разместить в более крупной соседняя ячейка. Вы можете создать сетку с любым кол-вом ячеек и настроить её под себя, большинство css фреймворков это позволяют сделать.

Можете так же перестраивать свои блоки без сетки, если она для вас не удобна или не подходит при каких-то обстоятельствах.

www.carolinaherrera.com/ch/en/ в вашем примере, если посмотреть код, увидите, что картинки растянуты по высоте на 100% и абсолютно позиционированы в блоке, так же выровнены по центру с автоматической шириной. Тем самым при сжатие размеров окна ресайзятся только контейнеры, фото там остаются одного размера и просто обрезаются по краям.

Присоединяюсь к совету выше, masonry или isotope. Посмотрите настройки внимательнее, там можно указывать порядок.

html {
  position: relative;
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}

Не задавайте body высоту, задавайте минимальную высоту в 100%. При 100% body принимает высоту экрана. При содержимом превышающим этот размер body остаётся 100% от высоты экрана и не растягивается, тем самым футер приклеен к нижней точке и наслаивается на контент. Футер через position: absolute размещаете внизу и растягиваете на 100%. Как в приведенном выше примере для bootstrap

Тут есть несколько подобных плагинов

$('.modal').modal('show');
Открытия модального окна. После перезагрузки вызывать, либо по нажатию на кнопку делать e.preventDefault(); и подгружать модалку динамически и открывать.

Если рамку вы делаете посредством фоновых картинок,

.img-border {
   background:
        url('/1.png') no-repeat 100% 100%,
        url('/2.png') no-repeat 0 100%,
        url('/3.png') repeat-x 0 100%,
        .... N repeat;
}

То доп.элементами поверх картинки можно, а проще как посоветовал archelon, через псевдоэлементы.
Через position: absolute растяните по контейнеру .img-border, через z-index поместите на передний план поверх изображения.
У .img-border установите position: relative

К сетке bootstrap относятся классы .row, классы типа .col-*, и при желание .container. Вы можете просто скопировать стили этих классов себе в стили.

Пример реализации скриптом для вашей структуры.

Решения через js не рассматриваете? Masonry или Isotope

Расположение элементов (иконок) и размеры указать в процентах, относительно размеров всей карты. Само изображение (фоном или через img) растягивать по ширине контейнера соответственно, резиновым. Думаю ничего сложного в данном методе нет. На мобильных, если не хочется ужимать карту, чтобы все хорошо читалось и просматривалось, можно сделать overflow: auto для контейнера, а самой карте какие-то размеры, можно будет её скролить внутри контейнера.