title: Bootstrap navbar items not getting in center
body: <p>there is a website that I came across and I was making a clone of it using html css and bootstrap. But I am facing problems like my navbar is not working out. I need help I need to center the items in the navbar in the center and the social icons on the right side. I am new to this thing can anyone please help me?</p>
  <p>here's the website that I am trying to make a clone of <a href="https://i.stack.imgur.com/R0jyd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R0jyd.jpg" alt="enter image description here" /></a></p>
  <p>and here is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* #navbarNav {
    padding-bottom: 36px;
    padding-top: 54px;
  } */
  .nav-img {
    width: auto;
    max-width: 100%;
    max-height: 69px;
  }
  .navbar-custom {
    background-color: #000000;
  }
  .title-div {
    position: absolute;
    z-index: 1;
    top: 461px;
  }
  .home-heading {
    background-color: rgba(255, 255, 255, 0.5);
    color: black;
  }
  .main-image {
    /* background-image: url(../img/ill.jpg); */
    width: 100%;
    height: 82%;
    position: relative;
    z-index: -1;
  }
  .navbar {
    padding: 100px;
    background-color: black;
  }
  .navbar-brand {
    margin: 0px 0px 0px 30px;
  }
  .navbar-toggler {
    filter: invert(100%);
  }
  .navbar-nav li {
    float: left;
  }
  .nav-item a {
    display: block;
    text-align: center;
  }
  .instagram {
    filter: invert(100%);
    padding: 6px;
  }
  .facebook {
    filter: invert(100%);
    padding: 6px;
  }
  .email {
    filter: invert(100%);
    padding: 6px;
  }
  .phone-call {
    filter: invert(100%);
  }
  /* .mid{
     margin: 0px 0px 0px 200px;
     padding: 0px 0px 0px 235px;
     
  } */
  ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    background-color: #000;
  }
  
  li {
    float: left;
    /* border-right: 1px solid #bbb; */
  }
  
  li:last-child {
    border-right: none;
  }
  
  li a {
    display: block;
    color: white;
    text-align: right;
    padding: 14px 16px;
    text-decoration: none;
  }
  .logo {
        /* width: 133px;
      height: 69px; */
          width: auto;
      max-width: 100%;
      max-height: 69px;
        margin-top: 9px;
      margin-bottom: 17px;
      margin-left: 16px;
  }
  .bdy-img{
      width: 45% !important;
      height: auto !important;
      padding-top: 96px;
      padding-left: 75px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Playfair+Display&amp;family=Roboto:wght@300&amp;display=swap"
          rel="stylesheet"&gt;
      &lt;link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&amp;display=swap" rel="stylesheet"&gt;
  
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
          integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  
      &lt;!-- &lt;nav class="navbar navbar-expand-lg navbar-custom " &gt;
          &lt;img class="navbar-brand nav-img" src="img/logo-nav.jpg" alt=""&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
              aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="collapse navbar-collapse" id="navbarNav"&gt;
              &lt;ul class="navbar-nav justify-content-center" &gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="#"&gt;Home &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Features&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href="#"&gt;Pricing&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link disabled" href="#"&gt;Disabled&lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt; --&gt;
  
  
      &lt;nav class="navbar navbar-expand-lg"&gt;
          &lt;a class="navbar-brand" href="#"&gt;
              &lt;img src="img/logo-nav.jpg" class="logo"  alt="" loading="lazy" /&gt;
          &lt;/a&gt;
          &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
              aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
          &lt;/button&gt;
  
  
          &lt;div class="collapse navbar-collapse" id="navbarTogglerDemo01"&gt;
              &lt;div class="cintainer-fluid"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="span6" style=" float: none; margin: 0 auto;"&gt;
                          &lt;ul class=" navbar-nav "&gt;
                              &lt;li&gt;
                                  &lt;a class="nav-link" href=""&gt;Shop&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a class="nav-link" href=""&gt; I Love Lables&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a class="nav-link" href=""&gt; About&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                  &lt;a class="nav-link" href=""&gt; How It Works&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;ul class="list2"&gt;
                                  &lt;li&gt;
                                      &lt;a class="nav-link" href=""&gt; Charities&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a class="nav-link" href=""&gt; Sell With Us&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a class="nav-link" href=""&gt; News&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;a class="nav-link" href=""&gt; Designers&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;ul class="list3"&gt;
                                  &lt;li&gt;
                                      &lt;a class="nav-link" href=""&gt; Contact&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;ul class="navbar-nav "&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href=""&gt;
                          &lt;img src="nav-icons/instagram.png" class="instagram" width="50" height="50" alt=""
                              loading="lazy" /&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
  
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href=""&gt;
                          &lt;img src="nav-icons/email.png" class="email" width="50" height="50" alt="" loading="lazy" /&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href=""&gt;
                          &lt;img src="nav-icons/facebook.png" class="facebook" width="50" height="50" alt=""
                              loading="lazy" /&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;a class="nav-link" href=""&gt;
                          &lt;img src="nav-icons/phone-call.png" class="phone-call" width="50" height="50" alt=""
                              loading="lazy" /&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/nav&gt;
  
  
      &lt;!-- &lt;div class="main-bdy-div  align-items-center" &gt;
      &lt;div class="container-fluid title-div home-heading"&gt;
          &lt;h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;" &gt;I love labels&lt;/h1&gt;
      &lt;/div&gt;
             
      &lt;div class="container-fluid title-div " style="width: 49%;   background-color: rgba(255, 255, 255, 0.5); "&gt;
          &lt;h1 class="" style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;"&gt;New Zealand's
          Premier Boutique for Quality Preloved Designer Fashion&lt;/h1&gt;
      &lt;/div&gt;
      &lt;img class="main-image" src="img/ill.jpg" alt=""&gt;
  &lt;/div&gt; --&gt;
  
  
      &lt;div class="main-img"&gt;
          &lt;img class="main-image" src="img/ill.jpg" alt=""&gt;
      &lt;/div&gt;
  
      &lt;div class="container-fluid justify-content-start"&gt;
          &lt;div class="container-fluid title-div " style=" text-align: center; width: 28%;   background-color: rgba(255, 255, 255, 0.5); "&gt;
              &lt;h1 class="" style="font-size: calc(3.6vw + 1rem); font-family: 'Playfair Display', serif;"&gt;I love labels
              &lt;/h1&gt;
          &lt;/div&gt;
  
          &lt;div class="container-fluid title-div justify-content-between " style="width: 49%;   background-color: rgba(255, 255, 255, 0.5); top: 576px; "&gt;
              &lt;h1 class=""
                  style="text-align: justify; font-size: calc(1.44vw + 1rem); font-family: 'Cormorant Garamond', serif;"&gt;
                  New Zealand's
                  Premier Boutique for Quality Preloved Designer Fashion&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;!-- main body section --&gt;
  
  &lt;div class="container-fluid"&gt;
      &lt;div&gt;
          &lt;img class="bdy-img" src="img/IMG_0018.jpg" style=" width: 100%;
    height: auto;" alt=""&gt;
  
          &lt;div class="d-flex align-items-start justify-content-end"&gt;
              &lt;h1 style="text-align: center;"&gt;Our Unique Approach.&lt;/h1&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      
  &lt;/div&gt;
  
  
  
  
  
  
  
  
  
  
  
      &lt;!-- bootstrap js --&gt;
      &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
          integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
          integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
          integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>