Сергей delphinpro

у блока #home - display:table;
у блока .home-text-wrapper - display:table-cell;width:100%;
Ячейка занимает всё пространство своей таблицы.
.home-text-wrapper и .partner-logos находятся в одном потоке, и т. к. первый занимает всю ширину, второму остаётся нулевой промежуток. 25% от нуля, как вы понимаете - ноль.

В вашем случае это должен быть extend
Миксин примерно для таких задач

%button {
  display: inline-block;
  width: 100px;
  height: 50px;
}
@mixin button-color($color, $text) {
  background: $color:
  color: $text;
  border: 1px solid $text;
}
.attention-button {
  @extend %button;
  @include button-color(red, white);
}

danger-button {
  @extend %button;
  @include button-color(lime, white);
}

раз: https://jsfiddle.net/p70c1r3a/
Данный тег не является частью современной спецификации html, не пройдет валидацию. Однако он поддерживается всеми браузерами.

два: https://jsfiddle.net/bcrmh9gq/
Этот тег не имеет закрывающего тега и отображает как есть весь остаток страницы. Также не является частью спецификации html и не пройдет валидацию, но поддерживается всеми браузерами.

Правильное решение - при выводе кода заменять спецсимволы на html-сущности. В php для это этого есть функция htmlspecialchars().

https://jsfiddle.net/k5rpn3nj/3/
но тоже есть нюансы

Всегда подключайте вот этот файлик перед остальными стилями
https://necolas.github.io/normalize.css/

ul.el-grid {
  font-size: 0;
}

li.isotope-item {
    font-size: 1rem;
    float: none;
    display: inline-block;
    vertical-align: top;
}

Эти правила должны располагаться в css файле после определений сетки (чтобы float перекрыть).

Более современный вариант

ul.el-grid {
  display: flex;
  flex-wrap: wrap;
}

Тогда у вас и блоки одной высоты станут (в каждой строке). Но тут IE10+

pointer-events: none;

Уменьшите на 1-2 пикселя радиус скругления у нижнего блока, или увеличьте у верхнего. или наоборот...

https://jsfiddle.net/42esmro5/

Например так
https://jsfiddle.net/rpL2ghb2/5/

caniuse.com/#search=http2
Поддержка уже хорошая, но пока рано отказываться от конкатенации файлов, я думаю. Тем более работает только по https.
А уж минификация никогда не станет лишней.

https://jsfiddle.net/9d1eu5tn/2/

https://jsfiddle.net/DelphinPRO/ukdmz20y/5/

Неиспользуемые - это объявления просто, без правил?
типа .somclass {} ?

Ну и зачем они вам в выходном css файле? Всё правильно less делает.

https://jsfiddle.net/e4y1r1ed/

id = уникальный идентификатор! Единственный на странице.
нужно поменять на класс class="column"

#table {
  display: flex;
  flex-flow: row wrap;
}
.column {
  flex: 1 0 50%;
}

карту сделайте на всю ширину. внутрь еще один блок с фоном на половину (градиентами)
внутрь контейнер с ограничением по ширине, внутрь два блока по 50%, в первый - информацию

зы
Да, карта будет с абсолютным позиционированием, если не поняли

https://jsfiddle.net/2o4srcL0/

UPD
https://jsfiddle.net/2o4srcL0/1/

Не возводите всё в абсолют.
Нужно действовать по обстоятельствам. Если конкретный размер зависит от размера шрифта, то их следует задавать в em. Например, интерлиньяж напрямую зависит от размера шрифта. Или расстояние между абзацами, заголовками и т.п.
Непосредственно размер шрифта лучше указывать в rem (и одновременно в пикселях, если верстаете под IE8). Есть случаи, когда удобно задать размер шрифта именно в em, это когда одни элемент вложен в другой, и у этого вложенного элемента шрифт должен быть больше/меньше относительно родителя.

В общем нет правила "пишите всё в em" или "пишите всё в пикселях". Ориентируйтесь по обстоятельствам, включайте логику.

Держите https://jsfiddle.net/v4fjr5z3/

Принцип работы сетки бутстрапа - mobile first (сначала мобильный вид), от меньшего к большему.

По умолчанию все колонки - 100% ширины, что эквивалентно col-xs-12, который, собственно назначать и не требуется. Далее по нарастающей. Если нам нужно изменить сетку для small-экранов, мы применяем *-sm-* классы, для средних - *-md-*, для больших - *-lg-*, для оч больших - *-xl-*. При этом можно пропускать определенные классы, если для данного размера ничего менять не нужно, по сравнению с предыдущим меньшим. Т.е. если мы хотим на мобильнике все в одну колонку, на среднем экране - в две, а на максимальном - в четыре, то можем указать только два класса, пропустив xs, sm и lg: col-md-6 col-xl-3