title: NavBrand image in navbar creates white spaces when changing the width in %
body: <p>I want to add a logo to a nav bar using bootstrap, but the image is quite large to fit there. My solution is to add this into the CSS:</p>
  <p>HTML</p>
  <pre><code> &lt;nav class=&quot;navbar navbar-expand-lg navbar-dark bg-dark&quot;&gt;
              &lt;a class=&quot;navbar-brand&quot; href=&quot;index.html&quot;&gt;
                  &lt;img src=&quot;Fernando Borea - Logo.png&quot; alt=&quot;&quot; class=&quot;d-inline-block align-top headerLogo img-responsive&quot;&gt;
              &lt;/a&gt;
  ...
  </code></pre>
  <p>CSS</p>
  <pre><code>.headerLogo
  {
    width: 50%;
    height: auto;
  }
  </code></pre>
  <p>That works perfectly to reduce the image size, but I then get huge right margins:</p>
  <p><a href="https://i.stack.imgur.com/BK2Yb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BK2Yb.png" alt="enter image description here" /></a></p>
  <p>However, when I change the CSS to be pixels, the huge margin goes away. I want to use % to easily change the size, but without getting the massive margin.</p>
  <p>Using fixed values:</p>
  <pre><code>.headerLogo
  {
    width: 200px;
    height: auto;
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/QgY5V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QgY5V.png" alt="enter image description here" /></a></p>
  <p>I'm new to bootstrap/html/css/js so I'd really appreciate if you can explain why the solution works as well, thanks!:D</p>