Pavel Torbeev

Если откроете страницу с помощью инспектора, увидите, что все блоки на сайте пустые

Верхний блок имеет свойство position:fixed, блок снизу margin-top = высоте верхнего блока. У нижнего z-index больше

Создаете второе окно, с id, к примеру, test-modal2 и кнопку открития, с классом, к примеру trigger2
В итоге будет два тригера и два окна

$('body').on('click', '.trigger', function(e){
        e.preventDefault();
        $('#test-modal').modal().open();
      }).on('click', '.trigger2', function(e){
        e.preventDefault();
        $('#test-modal2').modal().open();
      });

На кнопке весит какое то событие (скорее всего on click) Добавьте в функцию $(this).hide() если jquery

$(document).on('click', '.btn' function () {
   ...
   $(this).hide();
});

ответ №1 vertical-align: middle. Картинка и текст должны быть инлайн элементами
ответ №2 прописываете ul {list-style: none} глобально
ответ №3 Добавьте остальным li, кроме первого display:none, а при ul:hover li {display:block}

base64 кодировка. Вместо ссылки на изображение в атрибуте src установлено само изображение.
Кодировать и декодировать изображение можно на сайте codebeautify.org/base64-to-image-converter

подробнее о base 64 и зачем он нужен, тут

у Serdji почти верное решение. Еще необходимо вынести переменную count из функции
Решение:
https://jsfiddle.net/o0yx0e2n/3/

Что значит не тянулись?
.block имеет ширину 27%. Что бы не тянулся, необходимо, что бы была фиксирвоанная ширина у блока .block, либо у .advantages.
Если нужно, что бы кругляшки друг на друга не налазили, нужно блоку .block img прописать свойство max-width: 100%

Можно пример увидеть?
Если способы
text-align: right
Внешнему блоку
или
float: right
не помогают, то есть вариант: сделать перед блоком, который нужно прижать к правому краю, еще один блок, равный по ширине (ширина внешнего блока - ширина блока, который нужно прижать справа)