iBird Rose

ну бутстрап тут вряд ли тебе поможет. обычным flex сделай 3 колонки и в них картинки засунь. ну и для картинок задай свои width которые должны быть. примерно так:

синим выделил отступы

nav {
    font-size: 0;
}
.dropdown {
  font-size: 14px;
}

это популярная проблема, когда еще не было flex. гугли про решение проблем с inline-block
к примеру тут описано: https://habr.com/ru/post/189118/

ну раз там есть ссылки - у ссылок и убирай
nav a {text-decoration: none;}

гугли "rhombus layout codepen"
https://codepen.io/fafi/pen/cqDCu
https://codepen.io/imhvost/pen/KmweVp

выводи стандартную нумерацию в before к примеру и сможешь стилизовать как тебе будет удобно

запрос для гугла "karaoke text codepen"

https://codepen.io/trongthanh/pen/IhEme
https://codepen.io/trongthanh/pen/EDuxd

ховер работает, когда ты наводишь на элемент. и перестает работать когда курсор вышел за рамки элемента.
ты повесил ховер на ссылку. ховер работает, когда ты навел на ссылку, а выпадающее меню - это уже вне элемента "a"

тут scss(sass) не причем. прочитай про :first-child подробнее htmlbook.ru/css/first-child

Псевдокласс :first-child применяет стилевое оформление к первому дочернему элементу своего родителя.

первый дочерний у тебя там .logotype

пустым медиа запрос не оставляй
хоть один стиль напиши в 992

делай движение через transform: translate

гугли codepen background parallax
к примеру одно из первых:
https://codepen.io/skeurentjes/pen/wvpus

ul {display: flex;}
или
li {display: inline-block;}

тк нечего заливать в другом разрешении, чем то, в котором ты выводишь.
а вообще используй svg

не знаю что ты юзаешь для слайдера, но к примеру тут есть https://seiyria.com/bootstrap-slider/#example-14