Рома Зварич

Момент №1:
Картинка = 470px

Задайте ей max-width: 100%

Момент №2
Кнопка слайдера выходит за рамки

Если Вы используете фреймворк Bootstrap, возможно есть смысл быть последовательным и соблюдать единообразие в коде.
Как минимум, придерживаться одного выбранного метода.
Ну и наверняка не хуже будет использовать функционал фреймворка там, где это возможно, а не где захочется, раз уж Вы выбрали использовать фреймворк.
Здесь речь не о быстродействии, а об удобстве поддержки кода для других разработчиков или даже для самого себя.

Например, вот так
https://codepen.io/hisbvdis/pen/jgeveo

Duff1k ,

куда добавить z-index ?

Тяжело сказать, куда добавить, не имея возможности "пощупать" код.
Скриншот это не особо заменяет.
Возможно, к классу "navbar"

.navbar {
    z-index: 999;
}

.
Правда, задавать большие числа "z-index: 99999...." - не самый лучший способ.
Но учитывая то ,что Вы не очень разбираетесь в вопросе, на это можно сделать скидку.

Mansur05 , вы приводите абстрактный пример, решение которого может не быть решением в другой ситуации.
В приведенном Вами коде решение следующее.

https://codepen.io/hisbvdis/pen/EqjvQb

Вот пример вёрстки того, что Вы указали на картинке