Как исправить изображения, плавающие над панелью навигации при прокрутке?

Question

Короче говоря, я работаю на этом сайте для моего экзамена. Все было хорошо, пока я не начал делать галерею. Проблема не в самой галерее, а в навигационной панели, я понятия не имею, как я могу это исправить. В любом случае, когда я прокручиваю вниз к своей галерее, фотографии не просто прячутся под навигационной панелью, они go над ней. То же самое происходит с jumbotron, что у меня есть, текст также идет по нему.

Вот мой HTML

А вот мой CSS

.jumbotron {
  background-image: url('index_jt.jpg');
  height:300px;
  background-repeat: no-repeat;
  background-size: cover;
  transition: transform .2s;
  border-bottom: 2px solid black;
  color: black;
}
.jumbotron .container {
  position:relative;
  top:50px;
  transition: transform .2s;
} 
.navbar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    background-color: black !important;
}
.navbar-nav {
    text-align: center;
}
.jumbotron:hover {
    transform: scale(1.01);
}
.nav-item {
    transition: transform .2s;
}
.nav-item:hover {
    transform: scale(1.05);
}

Я знаю, что это много, но я очень признателен за некоторую помощь.

Answer 1

Что я понял из вашего поста, так это то, что вы хотите, чтобы ваш раздел галереи находился под панелью навигации во время прокрутки, для этого добавьте следующее css:

.navbar {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    background-color: black !important;
    z-index: 1;
}