title: Too much horizontal space in Bootstrap 4 nabvbar with centered image in nav links?
body: <p>I am trying to make links in Bootstrap navbar with an image as background, such that the text of the link is centered in the image.</p>
  
  <p>The image and text positioning is correct, but there is some strange horizontal space between nav links, and I've not been able to figure out where it's coming from. Any help?</p>
  
  <p>Example:</p>
  
  <p><a href="https://jsfiddle.net/4zghtcd0/" rel="nofollow noreferrer">https://jsfiddle.net/4zghtcd0/</a></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>.planet {
      position: relative;
      height: auto;
      margin: auto;
      text-align: center;
  }
  
  .planet img {
      width: 10%;
  }
  
  .planet a {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
  }</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;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
          crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;nav class="navbar navbar-expand-lg"&gt;
          &lt;div class="" id="navbarSupportedContent"&gt;
              &lt;ul class="navbar-nav"&gt;
                  &lt;li class="nav-item"&gt;
                      &lt;span class="planet" style="top: -1rem"&gt;
                          &lt;img src="https://www.goodfreephotos.com/cache/vector-images/kawaii-earth-vector-clipart_800.jpg" /&gt;
                          &lt;a class="nav-link active"&gt;HOME&lt;/a&gt;
                      &lt;/span&gt;
                      &lt;!--&lt;a class="nav-link" href="#"&gt;home&lt;/a&gt;--&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="#"&gt;|&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item active"&gt;
                      &lt;a class="nav-link" href="#"&gt;BAR&lt;/a&gt;
  
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>