Как разместить элементы вертикально, а не накладывать друг на друга

Question

У меня есть элемент с изображением.Проблема в том, что когда браузер имеет мобильный размер, верхняя часть изображения обрезается панелью навигации.Любые идеи о том, как заставить его двигаться вниз, чтобы его не порезать.Я новичок в CSS и начальной загрузке.Ссылка на страницу находится здесь:

Я бы хотел пока избегать Z-индекса, так как не хочу вмешиваться в последовательность z-индекса всей темы

 <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
    //Some more stuff like a form and a few list items (text)
      </div>
 </nav>

элемент с изображением находится здесь:

  <section id="about" class="about-section text-center">

  </section>

  <!-- Projects Section -->
  <section id="projects" class="projects-section bg-light">
    <div class="container">

      <!-- Featured Project Row -->


      <!-- Project One Row -->
      <div class="row justify-content-center no-gutters mb-5 mb-lg-0">
        <div class="col-lg-6">
          <img class="img-fluid" src="img/liomi.png" alt="">
        </div>
        <div class="col-lg-6">
          <div class="bg-black text-center h-100 project">
            <div class="d-flex h-100">
              <div class="project-text w-100 my-auto text-center text-lg-left">
                <h4 class="text-white">Misty</h4>
                <p class="mb-0 text-white-50">An example of where you can put an image of a project, or anything else, along with a description.</p>
                <hr class="d-none d-lg-block mb-0 ml-0">
              </div>
            </div>
          </div>
        </div>
      </div>


    </div>
  </section>

ниже приведены некоторые медиазапросы вокруг navbar и mainNav

@media (min-width: 992px) {
  #mainNav {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
    background-color: transparent;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    padding: .5rem 0;
    color: rgba(255, 255, 255, 0.5);
  }
  #mainNav .nav-link {
    -webkit-transition: none;
    transition: none;
    padding: 2rem 1.5rem;
    color: rgba(255, 255, 255, 0.5);
  }

У части с стилем, как показано ниже (не все биты включены):

.projects-section {
  padding: 1rem 0;
}

.projects-section .featured-text {
  padding: 2rem;
}

@media (min-width: 992px) {
  .projects-section .featured-text {
    padding: 0 0 0 2rem;
    border-left: 0.5rem solid #64a19d;
  }
}

.projects-section .project-text {
  padding: 3rem;
  font-size: 90%;
}

@media (min-width: 992px) {
  .projects-section .project-text {
    padding: 5rem;
  }
  .projects-section .project-text hr {
    border-color: #64a19d;
    border-width: .25rem;
    width: 30%;
  }
}

Если я смогу показать весь флакон духов, а не разрезать