Хочу разместить изображение за прозрачной панелью навигации?

Question

Я пробовал align-items-start, он не работает, потому что navbar - это блочный элемент, поэтому я присвоил navbar значение d-inline, и все же каким-то образом класс nav отправляет его, потому что он имеет больше смысла для него. угадайте, и я даже попробовал, пока дисплей не работает

это мои html и css: -

      <Section id="Navbar"> 
        <nav class="navbar fixed-top navbar-expand-lg navbar-transparent">
          <a class="navbar-brand" href="#">CANDY</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                  <li class="nav-item">
                      <a href="#" class="nav-link">HOME</a>
                  </li>
                  <li class="nav-item">
                      <a href="#" class="nav-link">ABOUT</a>
                  </li>
                  <li class="nav-item">
                      <a href="#" class="nav-link">TICKETS</a>
                  </li>
              </ul>
            </div>
          </nav>
          </Section>

          <section id="easy">
                <div class="row">
                  <div class="col-6 text-center" mt-5>
                    <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                    <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                    <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                    <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                    <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                    <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                    <h1>MUSEUM<span>/</span>OF<span>/</span>CANDY</h1>
                  </div>
                  <div class="col-6 d-flex align-items-start">
                    <img src="imgs/hand2.png" alt="" class="img-thumbnail">
                  </div>
                </div>


          </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  </body>
body    {
    background-color: #f498b8;
    padding-top: 4rem;
    font-family: nunito;
    font-size: 100;
}
.navbar-brand   {
    color: #D0006A;
}
.nav-link   {
    color: white;
}
/* $(window).scroll(function () {
    if ($(window).scrollTop() >= 50) {
    $('.navbar').css('background','red');
    } else {
    $('.navbar').css('background','transparent');
    }
    }); */

a:hover {
    color: #FE0049;
}
.navbar-nav .nav-link    {
    font-weight: 100;
    font-size: 1.5em;
}
.navbar-brand {
    color: #FE0049;
    font-size: 1.5em;
}
.h1, h1 {
    font-weight: 100;
    font-size: 4rem;
    color: white;
}
span    {
    color: #FE0049;
}
.img-thumbnail  {
    padding: 0;
    margin-top: 0;
    width: 100%;
    height: auto;
}
.collapse .navbar-collapse  {
    display: inline;
}

Можете ли вы помочь мне также я все еще учусь, так что вы увидите много ошибок, потому что я пытаюсь сделать dis самостоятельно.