Denis Kunitsyn

Если кому понадобится, в новых версиях barba v2 нужно использовать

barba.hooks.beforeEnter((data) => {
 // Вызов скриптов
});

.container{display:flex}

media only screen and (max-device-width: 480px) {
.single-featured-image-header img {
width: 100%;
height: 100%;
}
}

media only screen and (max-device-width: 480px) {
.single-featured-image-header {
width: 100%;
}
}
див перед id зачем писать? и скобку в конце поставьте } закрывающую медиа и еще у вас не id а class соответственно не # а . перед названием класса

В фаиле .htaccess пропиши

RewriteEngine on
RewriteBase /
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /([^.]+)\.html\ HTTP
RewriteRule ^([^.]+)\.html$ DOMEN.COM/$1 [R=301,L]
RewriteCond %{REQUEST_URI} !(\.[^./]+)$
RewriteCond %{REQUEST_fileNAME} !-d
RewriteCond %{REQUEST_fileNAME} !-f
RewriteRule (.*) /$1.html

*Там где domen.com твой

Тож не понимаю что не так с дивами )

html:
div class="main"
div class="main_left" /div
div class="main_center" /div
div class="main_right" /div
/div

css:
.main {position: absolute; width: 100%; height: 20%}
.main_left {position: absolute; width: 33%; height: 100%; left: 0}
.main_center {position: absolute; width: 33%; height: 100%; left: 33%}
.main_right {position: absolute; width: 33%; height: 100%; right: 0}

Есть много вариантов абсолютное позиционирование одно из них

Просто на hover добавь box-sizing: border-box

.box > div:hover {
border: 2px solid black;
box-sizing: border-box;
}