Bootstrap - remove background from navbar link - html

Question

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.
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.
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.
None linked: http://prntscr.com/2ob9mj
LinkedIn not linked, rest linked: http://prntscr.com/2ob2b2
CSS code added to bootstrap.min.css. Rest is as it comes:
.navbar-social{
float:right !important;
padding:5px;
font-size:18px;
line-height:37px;
height:20px
}
HTML: (a href removed in this case)
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="">REMOVED</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">About</li>
<li class="dropdown">
Programming <b class="caret"></b>
<ul class="dropdown-menu">
<li>Java</li>
<li>C++</li>
<li>Actionscript 3.0</li>
</ul>
</li>
<li>Web Design</li>
</ul>
<ul class="nav pull-right">
<li class="navbar-social"><img src="images/linkedin.png" alt="LinkedIn" /></li>
<li class="navbar-social"><img src="images/github.png" alt="GitHub" /></li>
<li class="navbar-social"><img src="images/twitter.png" alt="Twitter" /></li>
<li class="navbar-social"><img src="images/facebook.png" alt="Facebook" /></li>
</ul>
</div>
</div>
</nav>
Thanks all!

Answer 1

Bootstrap adds styling to the child a elements. You could simply overwrite it using the following:
WORKING EXAMPLE HERE
.nav .navbar-social > a {
padding:0;
}
.nav>li>a:hover, .nav>li>a:focus {
background-color: transparent;
}