Remove Bootstrap whitespace below nav navbar-nav - css

Question

I'm trying to remove the bootstrap whitespace between my menu and the following section. My menu HTML is:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="navbar-brand">
<li><img src="{% static 'img/apps-png.png' %}" width="150px" alt="appsrfun logo" /></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Mobile Apps</li>
<li>Android</li>
<li>Apple</li>
<li>Download</li>
<li>Tags</li>
</ul>
</div>
</div><!-- .container -->
</nav>
If I inspect each element the bottom border, padding and margin are all set to 0px. There is a mysterious white space between the end of <div class="collapse navbar-collapse" id="myNavbar"> and the end of <ul class="nav navbar-nav">. The former has a shows a height of 106px while the latter shows 100px but neither has border, margin or padding. How do I align them?
Thanks
EDIT
I've included my CSS to remove the bootstrap standard margins and padding
/* Navbar */
.navbar .navbar-nav {
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar .nav > li > a:link, .navbar .nav > li > a:visited {
color: #f7931e;
height: 100px;
padding-top: 40px;
margin-bottom: 0px;
}
.navbar .nav > li > a:hover, .navbar .nav > li > a:active {
background-color: #f7931e;
color: #ffffff;
border-bottom: 6px solid #ffff01;
}
.navbar {
margin-bottom: 0px;
padding-bottom: 0px;
}
.navbar-brand {
list-style-type: none;
margin-bottom: 0px;
}
.navbar-default {
background-color: transparent;
}

Answer 1

Probrably it has to do with the vertical-align. try setting vertical-align:middle to .navbar .navbar-nav.
Edit: Usually that happens when you have elements with different vertical-align values. I don't know what are the CSS for the rest of your code but, having elementA with vertical-align:middle and elementB vertical-align:baseline.
Example:
.container{min-height:80px;width:100%;background:#333;}
.box1{background:#eee;width:40px;height:40px;display:inline-block;vertical-align:middle;}
.box2{background:red;width:100px;height:100px;display:inline-block;}
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
Setting vertical-align:middle to .box2, will fix the problem.