Removing white line from bootstrap 3 navbar-inverse dropdown menu - html

Question

I'm making a as clean as possible menu and have managed to rid it of some unwanted styling. One little white line remains however, and I'm demanding 0 or none for borders all over my CSS, trying to get it gone.
It can be seen in these images above the music icon and below the dropdown icon:
It is only in "small screen mode" and with the dropdown active it shows up.
custom navbar CSS
.navbar {
background-color: transparent;
background: transparent;
border: 0;
}
.navbar li {
color: white;
font-size: 14px;
}
.collapse {
border: 0;
}
#myNavbar {
border: 0;
}
.navbar .dropdown-menu::after{
border:0;
}
.navbar-header .navbar-collapse {
border: 0;
}
.navbar.navbar-default {
padding: 10px 0;
background: rgba(0, 0, 0, .1);
border: none;
}
.navbar.navbar-default .navbar-nav > li > a,
.navbar.navbar-default .navbar-brand {
color: white;
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
The menu markup:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right pull-right">
<li><span class="glyphicon glyphicon-music"></span> Music</li>
<li><span class="glyphicon glyphicon-tasks"></span> Web</li>
</ul>
</div>
</div>
</nav>
And here is a fiddle (press the computer icon to run it in its own window):
How can I point at that element to get him out of there?
Thank you so much for any help or pointers!

Answer 1

Actually its a box-shadow just remove/overwrite it
.navbar-collapse#myNavbar {
-webkit-box-shadow: none;
box-shadow: none;
}

Answer 2

That was box-shadow not a border in .navbar-collapse class in default bootstrap css. You can overwrite it.
.navbar-collapse#myNavbar {
-webkit-box-shadow: none;
box-shadow: none;
}

Answer 3

Use this class in your css.
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 0px 0 rgba(255,255,255,.1) !important;
box-shadow: inset 0 0px 0 rgba(255,255,255,.1) !important;}