title: Bootstrap:where does this white line come from?
body: <p>Warning: Bootstrap and HTML5 novice here.</p>
  
  <p>I'm designing a header for a site with two rows: first, there's the logo, and then, in another row, a navigation bar. Things work, more or less... except that there is a thin white line between the two rows that I have no way of removing. Here's my code:</p>
  
  <pre><code>&lt;header class='masthead'&gt;
  &lt;a class="navbar-brand" href="index.php"&gt;&lt;img src="logo.png" alt="Logo"&gt;&lt;/a&gt;
  &lt;/header&gt;
      &lt;nav class="navbar navbar-default" role="navigation"&gt;
        &lt;div class="container-fluid"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;How it works&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Our company&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
        &lt;/div&gt;&lt;!-- /.container-fluid --&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>And here is my CSS:</p>
  
  <pre><code>* html5doctor.com Reset v1.6.1 - http://cssreset.com */
  html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
  
  
  body{
      font-family: 'Cabin', sans-serif;
      background-color: white;
  }
  
  
  /*---------------------HEADER-------------*/
  header.masthead{
      background-color: #103961;
      height: 82px;
      margin-bottom: 0px;
  }
  
  header.masthead nav{
      background: #339966;
      border: 0px;
      box-shadow: none;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
  }
  
  .navbar-brand&gt;img{
      width: 270px;
  }
  
  .navbar {
      background: #003471;
      border: 0px;
      border-bottom-left-radius: 0px;
      border-top-left-radius: 0px;
      border-bottom-right-radius: 0px;
      border-top-right-radius: 0px;
      min-height: 35px;
  }
  
  .navbar-nav{
      margin-top: 0px;
  }
  
  .navbar-nav li a{
      color:white !important;
      text-shadow: none;
      background:none !important;
      box-shadow: none !important;
      font-size: 90%;
      text-transform:uppercase;
      padding-top: 5px;
      padding-bottom: 5px;
  }
  </code></pre>
  
  <p>Under Bootstrap 3.3.1, and in Firefox 33 and Safari 6 (for desktop both), I get a thin white line between both rows:</p>
  
  <p><img src="https://i.stack.imgur.com/PL0BE.jpg" alt="screencap. Can you see the white line?"></p>
  
  <p>And I have no idea where it comes from. All possible margins, paddings, borders... are set to 0px (well, except <code>border-image-width</code>, which shows up as 1, but setting it explicitly to 0 does nothing.</p>