Ankhena

Логично
сначала
body.is-home .main-head .top-line .contacts-wrap
а в media только .contacts-wrap
У первого специфичность выше, вот и перебивает, читайте тут

html, body и эти блоки - высота 100% (и/или минимальная высота, смотря что там еще у сайта есть)
ширина блоков 50%.

Возможно использование display: inline-block, table или flex.

Возможно использование единиц vw и vh.

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

Всего кода не показываете, по этому:

Не видно где вы пишете media, возможно они просто перебиваются другими свойствами - смотрите, что написано в DevTools.

Про margin.
Если margin задан в %, то считается он от ширины родительского блока.

Кроме этого еще есть эффект схлопывания margin (легко гуглится). Это опять таки одно из предположений.

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

1.1 У браузеров есть скролл, панельки отбирающие высоту, у старых еще и рамочки (или от ОС а не от версии браузера зависит, забыла ужу как выглядело).

1.2. У мониторов разное соотношение сторон

=> вертикальный скролл на одних появится раньше, чем на других и соответственно уменьшится ширина поля.

2. У браузеров есть масштаб. Проверяйте, часто бывает случайно и незаметно +/-10%

3. Есть настройка ОС. Часто на небольших ноутах с высоким разрешением стоит масштаб больше 100%. При этом, он работает не во всех браузерах/приложениях.

Если этот блок удалить div class="slider-reviews" - полосы не будет. Ищите что с ним или вокруг него не так с отступами/позиционированием/размерами.

Да, обязательно, если Вы хотите считать себя верстальщиком.

Применяя бутстрап, Вы, в основном, просто расставляете классы и обертки.
Обязательно нужно понимать что и почему происходит.
Фремворк, препроцессор - это просто инструменты для ускорения работы. И препроцессоры тоже имеет смысл знать, задания и на них есть.

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

Заказчики всякие бывают и те кому подавай бутсрап (часто просто потому что они слышали от кого-то это слово и теперь произносят его с придыханием) и те, кому он строго не нужен.

Решение с флексами для картинок разного размера: codepen.io/anon/pen/RRQWpQ

Варианты:
по горизонтали:
1. text-align:center для li
2.

img {
display:block;
margin: auto;
}

3. flex

По вертикали:
1. либо через display table
2. через absolute и relative и нолики по всем сторонам и margin
3. проще всего через flex'ы

P.S.
1. Инлайн-блок правильно пишется вот так: display: inline-block;
2. Есть классные теги для окружения картинки: figure и figcaption