Bootstrap navbar - removing space between buttons - html

Question

I have a problem. I have a navbar with links represented by images like in the image below (please ignore the Home link as of now):
I would like to remove the grey space between each image horizontally. I have tried to set margin: 0% and padding: 0% on all the images and list items, but to no avail. Looking into Bootstraps source code I suspect it has something to do with the navbar-nav and nav classes being flex containers, but what flex property I should give what value to resolve the issue is unclear to me.
Here is the HTML for the navigation bar:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_content">
<i class="glyphicon glyphicon-align-center"></i>
</button>
<a href="#" class="navbar-brand">
Survey webapp
</a>
</div>
<div id="navbar_content" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="navitem">
<a href="#about">
<img class="navimage" src="Routine survey.png" />
</a>
</li>
<li class="navitem">
<a href="#contact">
<img class="navimage" src="Specific survey.png" />
</a>
</li>
<li class="navitem">
<a href="#help">
<img class="navimage" src="Help.png" />
</a>
<a href="#settings">
<img class="navimage" src="Settings.png" />
</a>
</li>
</ul>
</div>
</div>
</nav>
And here is the relevant (?) CSS:
.nav {
padding: 0%;
margin: 0%;
}
.navbar-nav {
padding: 0%;
margin: 0%;
}
.navitem {
padding: 0%;
margin: 0%;
}
Thanks in advance, I really appreciate the help!
Best regards,
Joshua

Answer 1

It looks as if Bootstrap (version 3) applies padding to <a> elements inside .nav:
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
I don't know if Bootstrap has a native method for removing that padding, but you can always override it yourself:
.nav>li>a {
padding: 0;
}