title: Bootstrap 3 Nav-bar change color cause showing a white border or white line
body: <p>Base on this <a href="http://jsfiddle.net/Snippet/fbqaz/" rel="nofollow noreferrer">fiddle</a>. how do i remove the white line..
  I tried to change the color of the nav-bar but there is a white line when its on mobile</p>
  
  <p><img src="https://i.stack.imgur.com/nh0RN.png" alt="enter image description here"></p>
  
  <p>on the bootstrap-theme.css
  i have added and editted some codes</p>
  
  <p>Code added and editted on bootstrap theme</p>
  
  <pre><code>.navbar {
    /*
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3B5998), to(#f8f8f8));
    background-image: -webkit-linear-gradient(top, #3B5998, 0%, #f8f8f8, 100%);
    background-image: -moz-linear-gradient(top, #3B5998 0%, #f8f8f8 100%);
    background-image: linear-gradient(to bottom, #3B5998 0%, #f8f8f8 100%);
    background-repeat: repeat-x;
    border-radius: 4px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
    */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3B5998', endColorstr='#fff8f8f8', GradientType=0);
    -webkit-box-shadow: inset 0 1px 0 rgba(59,89,152, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 0 rgba(59,89,152, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
  
    border-radius: 4px; 
    background-color:#3B5998; 
  }
  
  .navbar .navbar-nav &gt; .active &gt; a,
  .navbar-default .navbar-nav &gt; .active &gt; a:hover,
  .navbar-default .navbar-nav &gt; .active &gt; a:focus  {
    background-color: #3B5998;
    color:#e7e7e7;
  }
  
  .navbar-brand,
  .navbar-nav &gt; li &gt; a {
    /*text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);*/ 
  }
  
  .navbar-default .navbar-brand,
  .navbar-default .navbar-nav &gt; li &gt; a  {
    color: #ffffff;
  } 
  
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus ,
  .navbar-default .navbar-nav &gt; li &gt; a:hover,
  .navbar-default .navbar-nav &gt; li &gt; a:focus {
    color: #ffffff;
    background-color: transparent;
  } 
  
  .navbar-default .navbar-nav &gt; .dropdown &gt; a .caret{
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
  }
  
  .navbar-default .navbar-nav &gt; .dropdown &gt; a:hover .caret,
  .navbar-default .navbar-nav &gt; .dropdown &gt; a:focus .caret {
    border-top-color: #ffffff;
    border-bottom-color: #ffffff;
  }
  
  .navbar-default .navbar-nav &gt; .open &gt; a,
  .navbar-default .navbar-nav &gt; .open &gt; a:hover,
  .navbar-default .navbar-nav &gt; .open &gt; a:focus {
    color: #3B5998;
    background-color: #ffffff;
  }
  
  .navbar-default .navbar-nav &gt; .open &gt; a .caret,
  .navbar-default .navbar-nav &gt; .open &gt; a:hover .caret,
  .navbar-default .navbar-nav &gt; .open &gt; a:focus .caret {
    border-top-color: #3B5998;
    border-bottom-color: #3B5998;
  }
  </code></pre>