Роман

Только не 2,3,4 варианты. 2- у вас не будет работать во многих браузерах. 3,4 - вообще не семантичны.

а если вы будете использовать nav, то в него вкладывают не li, a a
www.w3schools.com/tags/tag_nav.asp

а вы bootstrap.min.js подключили после jQuery?

А добавить кастомный стиль колонке не пробовали? С указанием высоты.

E вас же id="number_block" для нескольких элементов задан - это во-первых.

Во-вторых, вы клонируете то, что у вас на данный момент в ДОМе. То есть если будет 4 строчки, то добавив филиал, вы склонируете 4 строчки. Для того чтобы вы клонировали только 2 строчки, вам необходимо закэшировать соответствующий блок дивов. И потом вставлять уже его.

ИМХО, нет ничего страшного в таком поведении на разных браузерах и пилить хаки, как то не элегантно. Определять версию браузера и выдавать ему свое - ну тоже как-то....
Перфекционизм оно хорошо, но в меру.

А то так можно придраться и к разному рендерингу шрифтов на Винде, Лине и Маке, к разной интерпретации свойства letter-spacing и т.д.

Как сверстаете страницу, поделитесь результатом ;)

Я использовал вот такой слайдер:
www.jqueryscript.net/demo/3D-Rotating-Carousel-Plu...

НУ а вообще вбивайте в гугл Circular Carousel и выбирайте подходящий вам вариант

Сначала вводим в гугл названия тегов. ПОтом читаем в выдаче htmlbook.ru/html/hgroup
Используется для группирования заголовков веб-страницы или раздела. Внутри располагаются теги заголовков от до . Данный тег исключён из версии HTML от W3C, но остался в версии WHATWG, будущее элемента пока не определено.
Потом читаем htmlbook.ru/html/header : Тег задает «шапку» сайта или раздела, в которой обычно располагается заголовок.

А теперь ответьте - зачем оборачивать заголовки в дополнительные теги? Вам же не за количество символов деньги платят?

Ответ легко гуглится на стаковерфлоу

option:hover {
box-shadow: 0 0 10px 100px orange inset;
}