Николай

Просто добавьте стиль псевдокласса для класса error.

.error:hover {
  box-shadow: 0 0 30px rgb(212, 0, 0);
}

Если раритеты(<=ie9) не надо поддерживать то display: flex у родителя и flex: 1 у правого контейнера.

Можно немного извратиться и написать директиву, которая будет вешать touchstart на блок. Кода строчек 5. Ну и делать это только, если есть поддержка touch.

Соединить изображения можно либо через canvas, либо используя какие-то библиотеки, на нём основанные.
Для начала почитайте про canvas, в любом случае пригодится.

Сделайте 2 колонки вместо одной.

<div class='row'>
 <div class='col-lg-6'>
 /*здесь внутренние блоки первой колонки*/
 </div>
 <div class ='col-lg-6'>
 /*здесь внутренние блоки второй колонки*/
 </div>
</div>

Как вариант - обернуть элемент, из которого создается bxslider в с каким-то классом.
Тогда можно будет писать разные стили и разделение будет по этим классам.
В css файле будет что-то такое:

.classname1 .bxslider{
}
.classname2 .bxslider{
}

в html:

<div class='classname1'>
    <ul class="bxslider"></ul>
</div>
...
<div class='classname2'>
    <ul class="bxslider"></ul>
</div>

У вас есть код, отвечающий за событие клика - вот он:

$('[data-toggle]').click(function () {
        var toggle_el = $(this).data('toggle');
        $(toggle_el).toggleClass('open-sidebar');
    });

Он для всех элементов, содержащих аттрибут data-toggle добавляет обработчик события click, в котором ищется элемент, определяемый селектором указанным в значении атрибута. И затем этому объекту добавляется или убирается класс. Для того, чтобы у вас всё работало надо добавить в html коде аттрибут data-toggle со значением .container.
Вот так:

<div class='description' data-toggle='.container'>
</div>

Вообще не очень понятно, зачем вам такая сложная система для определения элемента, который нужно сворачивать/разворачивать.

Скорее всего проблема в display:none: неправильно считаются ширина/высота блоков при инициализации слайдера. А если потянуть браузер за край - происходит событие resize, которое как правило обрабатывается в слайдере и происходит пересчет размера блоков. Решений проблемы несколько:
1. прятать блок не с помощью display:none, а например через position: absolute; top: -10000px; left:-10000px;
2. при активизации вызывать функцию из api слайдера, заставляющую перестчитать высоту/ширину.
Для bxSlider я думаю подойдет функция

slider = $('.bxslider').bxSlider();
slider.reloadSlider();