title: I'm trying to fix my logo in the center of the navbar
body: <p><a href="https://i.stack.imgur.com/bBimL.png" rel="nofollow noreferrer">Mobile View</a><br>
  <a href="https://i.stack.imgur.com/ayRU4.png" rel="nofollow noreferrer">Desktop view</a></p>
  
  <p>I am making a navbar and I want to fix my logo in the center of the navbar. I did it somehow but when I go to the mobile screen the logo is not exactly in the center and when I press my burger menu the logo moves to down.<br>
  How can I fix it please help me?</p>
  
  <pre><code>&lt;nav class="navbar navbar-expand-lg navbar-light sticky-top" style="background-color:transparent"&gt;
    &lt;div class="container-fluid"&gt;
      &lt;a class="navbar-brand neon" routerLink="/home"&gt;Shams Ali&lt;/a&gt;
      &lt;img class="img-fluid mr-auto logo" src="assets/logo.png"/&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 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="navbarSupportedContent"&gt;
        &lt;ul class="navbar-nav ml-auto "&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link neon" routerLink="/home"&gt;Home&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link neon" routerLink="/project"&gt;Projetcs&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link neon" routerLink="/about"&gt;About Me&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item active"&gt;
            &lt;a class="nav-link neon" routerLink="/contact"&gt;Contact Me&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <pre><code>.logo {
    margin: 0 auto;
    display: block;
    position: fixed;
    left: calc((100% - 195px) / 2);
    z-index: 100000;
  }
  </code></pre>