Сергей delphinpro

gulp-uncss

менять непосредственно классы col-* не следует. Но дописать в разметку еще один класс и дать ему необходимые свойства - норм. т.е в принципе сделано нормально. Но адаптивность своим классам нужно будет сделать самому.

https://jsfiddle.net/7601rswk/

https://jsfiddle.net/DelphinPRO/xuhv9bu3/1/

Зачем такие извраты, когда можно просто поменять вложенность местами?

normalize
init (box-sizing для всех, font-size для html, и прочие общие свойства такого рода)
layout - базовые раскладки для сайта
grid-system
typography
forms
components (BEM-blocks)
helpers - примитивы вроде .text-center: {text-align:center}
override - свалка стилей, перекрывающих стандартные стили CMS, поменять которые напрямую либо лень, либо нет возможности, либо слишком геморрно.

Разумеется, на вкус и цвет все фломастеры разные, так что определите для себя сами структуру стилей.

Ну вот, как-то так
https://jsfiddle.net/DelphinPRO/3Lp67w6s/

Потому что ширина auto

отрицательные margin для контейнера-обертки элементов, равные половине расстояния между элементами.

https://jsfiddle.net/DelphinPRO/oonue910/

пробелы поставьте вокруг звездочки
звездочка - это отдельный селектор.

display:flex;
justify-content: space-between;

А проблема-то в чем?

$(function(){

  // initialization here...

});

хотя нет

вы же пишете $('.loop')
А где у вас на странице этот селектор?

$(function(){

  $('.owl-carousel').owlCarousel({
      center: true,
      items:2,
      loop:true,
      margin:10,
      responsive:{
          600:{
              items:4
          }
      }
  });

});

1) руководствуясь здравым смыслом
2) можно, руководствуясь здравым смыслом
3) очевидно, что каждой единице измерения - своё место.
4) это контрольные точки. дизайнер дает вам понять, как должно все работать. в этих точках, как правило, верстка должна соответствовать макету. остальное - руководствуясь здравым смыслом.

Кнопку разместить внутри окна.
Абсолютное позиционирование кнопки.
Она будет зафиксирована относительно окна.

div{
  .media-s({
    width: 100%;
    color: #000;
  });
}

так вроде в less

https://jsfiddle.net/mvuuwmw6/

эх, пока писал код, тут уже накидали вариантов.... :(

https://jsfiddle.net/DelphinPRO/py4gLqjy/

у блока #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);
}