title: Bootstrap - remove background from navbar link
body: <p>I'm trying to work on coding a website using the Bootstrap development kit. I've set up the navigation bar with a couple of links but I'm having some trouble with some custom links I've added. I added CSS to the bootstrap.min.css file titled 'navbar-social', which will be used to house social media icons for the navigation bar.</p>
  
  <p>I added the images just fine and they display great. The problem I'm having is when I add a link to them they go out of line and hovering over them gives them a background box which I do not want.</p>
  
  <p>I've attached some screenshots and the code used, I cannot for the life of me work out where the background box is coming from, because checking the a styles doesn't seem to have anything there. I'm new to CSS so I apologise if I'm missing something obvious.</p>
  
  <p>None linked: <a href="http://prntscr.com/2ob9mj" rel="nofollow">http://prntscr.com/2ob9mj</a></p>
  
  <p>LinkedIn not linked, rest linked: <a href="http://prntscr.com/2ob2b2" rel="nofollow">http://prntscr.com/2ob2b2</a></p>
  
  <p>CSS code added to bootstrap.min.css. Rest is as it comes:</p>
  
  <pre><code>.navbar-social{
  float:right !important;
  padding:5px;
  font-size:18px;
  line-height:37px;
  height:20px
  }
  </code></pre>
  
  <p>HTML: (a href removed in this case)</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-static-top" role="navigation"&gt;
          &lt;div class="container"&gt;
               &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;a class="navbar-brand" href=""&gt;REMOVED&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li class="active"&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                        &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Programming &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Java&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;C++&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Actionscript 3.0&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href=""&gt;Web Design&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul class="nav pull-right"&gt;
                      &lt;li class="navbar-social"&gt;&lt;img src="images/linkedin.png" alt="LinkedIn" /&gt;&lt;/li&gt;
                      &lt;li class="navbar-social"&gt;&lt;img src="images/github.png" alt="GitHub" /&gt;&lt;/li&gt;
                      &lt;li class="navbar-social"&gt;&lt;img src="images/twitter.png" alt="Twitter" /&gt;&lt;/li&gt;
                      &lt;li class="navbar-social"&gt;&lt;img src="images/facebook.png" alt="Facebook" /&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>Thanks all!</p>