Question Newbie Boostrap5 | Positioning Text and Logo Problem

Issue

I recently star boostrap5 with big enthusiasm and start watching tutorials. In this tutorial he is adding text right corner and place the logo left corner. I wrote same code but in my index.html i did not get same result. What i missing ?

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<!---------------------------------- TOPBAR ---------------------------------->
<div class="top-bar">
  <div class="container">
    <div class="col-8 pull-right">
      <p><a href="+188888888">Call Us For Maintence Quickly!</a></p>
    </div>
  </div>
</div>
<!--------------------------------------------------------------------------->

<!---------------------------------- NAVBAR ---------------------------------->
<nav class="navbar bg-light navbar-light navbar-expand-lg">
  <div class="container"></div>
  <a href="index.html" class="navbar-brand"><img src="https://dummyimage.com/500x145/000/fff" alt="LogoTitle"></a>
</nav>
<!--------------------------------------------------------------------------->

Solution

add a element inside the container ex:

 <nav class="navbar bg-light navbar-light navbar-expand-lg">
        <div class="container">
            <a href="index.html" class="navbar-brand">
               <img src="https://dummyimage.com/500x145/000/fff" alt="LogoTitle">
            </a>
        </div>
</nav>

Answered By - joukhar