Павел

Бутстраповские модалки закрываются при нажатии вне контента или на background layout, т.е. затемненный фон, можно предположить что у Вас фон имеет z-index выше чем само окно с контентом.
Попробуйте фон сделать статическим, измените:

<div class="modal fade" id="YouModal" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="YouModalLabel" aria-hidden="true">

Или скрипту вызова:

$('#YouModal').modal({
  backdrop: 'static',
  keyboard: true
})

Ну или обрабатывайте исчезновение окна:

$('#YouModal').on('hide.bs.modal', function (e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

$(document).ready(function() {        
// Читаем url страницы
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
    $('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
} 
// Делаем таб активным
$('.nav-tabs a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});        
});

Быстрый фикс это скорее:

.panel-footer {
    padding: 10px;
    border-top: 1px solid #DBE0E4;
    background: #F5F5F5;
    box-shadow: none;
    height: 55px;
    overflow: hidden;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

Не должно так работать. Class popver не будет присутствовать в этом блоке, так как div с этим классом появляется перед закрытием </body>

Соответственно Вам нужно, при наведении на .post-thumbnail, определить с помощью js есть ли в body class popover , и соответственно если есть с помощью js убрать стрелку или добавить класс и удалить

.dropdown-menu {background:#000;}

Там же есть примеры themetrace.com/templates/bracket/app/modal.html

Foundation by Zurb
Bulma
Skeleton
Materialize
Semantic UI
UIKit

Пока что не устарел сильно. Отличается используемыми технологиями. Bs3 - флоаты, Bs4 - флексы
https://caniuse.com/#feat=flexbox

Гуглите css hack ie 10
Один из вариантов:

@supports (-ms-ime-align:auto) {
    .my-auto {
                               margin-top:100px !important;
                              }
}

Bootrastrap 3:
В Css:

.col-xs-5bl,
.col-sm-5bl,
.col-md-5bl,
.col-lg-5bl {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-5bl {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-5bl {
        width: 20%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-5bl {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-5bl {
        width: 20%;
        float: left;
    }  
}

Html:

<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>
<div class="col-xs-5bl"></div>

И также добавляете классы бутстрапа если надо по колонкам

Bootstrap 4:

<div class="row">
   <div class="col">
      1
   </div>
   <div class="col">
     2
   </div>
   <div class="col">
      3
   </div>
   <div class="col">
      4
   </div>
   <div class="col">
      5
   </div>
</div>

Скорее всего к main применяются какие то свои стили, попробуйте другой класс задать