Arman

Если работать с sass bootstrap 4, то уже работать с rem, т.к. там расчеты идут с ними

?
https://jsfiddle.net/b2o4vwna/

?

#otz {
    overflow: hidden;
}

У всех по разному скорее всего, у нас:

$first-color
$second-color
//..
$white
$black
$gray

т.е. основные цвета все равно нужно, т.к. часто меняются их оттенки, а вот основные цвета естественно часто меняются, но их редко больше 3

у меня ваш код работает, правда через 10-15 сек.

Зачем вы делаете аякс запрос на картинку? аякс делают запрос чтоб узнать у сервера где лежит картинка, а потом ее показать, вы же знаете уже где картинка и нужно просто поставить на фон как вы и делаете. Если не знаете где картинка, но знаете адрес скрипта который может подсказать путь до картинки, то туда и надо делать запрос, в ответ получите адрес на картинку и поставите ее на фон

в vendor.css храним либы, подключаем редко что новое и никогда не меняем, а вот для сайта стили меняются чаше и юзерам приходится по новой забирать все стили и скрипты, разумнее подключить отдельно как по мне.

Если про полосы по краям экрана, то у вас там столбцы есть <td width="5">&nbsp;</td>
они и дают белые полосы

.content .mainbar .gallery-card .more:active {
    line-height: 25px;
}

Правой кнопкой мыши -> Посмотреть исходный код. Дальше сравниваете его вариант и свой

Это пробел. Надо или размер шрифта в 0 сделать "font-size: 0;" или убрать все пробелы между тэгами; как вариант можно комменты наставить </div><!--><img>

Можно посмотреть как сделано или использовать бутстрап getbootstrap.com/css/#grid-column-ordering
Т.е. скорее всего у вас проблема что левая панель становится выше Контент блока, поменяв их местами через смещение вы сможете для мобил получить правильный вертикальный порядок. Просто для мобил надо будет дать 12, а для десктоп 3 и 9 или что у вас там