title: Bootstrap: Navbar not fixed to very top has like 40px padding?
body: <p>I am having an issue with twitter bootstrap this is how my navbar looks like:
  <img src="https://i.stack.imgur.com/r1Kk1.png" alt="Bootstrap navbar is in bue"></p>
  
  <p>There is a gap between the top of the page and the navbar.
  I tried using</p>
  
  <blockquote>
    <p>.navbar{
        position: fixed !important;
        top: 0px;     padding: 0px;   margin: 0px; }</p>
  </blockquote>
  
  <p>in my css file but its still not working. It looks like this in mobile and desktop (with the responsive css). I tried putting my sites css after the responsive css and before but it doesn't do anything. Does anyone have any idea why is this so?</p>
  
  <p>THe navbar data from bootstrap.css:</p>
  
  <pre><code>.navbar-fixed-top,
  .navbar-fixed-bottom {
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1030;
    margin-bottom: 0;
  }
  
  .navbar-fixed-top .navbar-inner,
  .navbar-fixed-bottom .navbar-inner {
    padding-right: 0;
    padding-left: 0;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
            border-radius: 0;
  }
  
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 940px;
  }
  
  .navbar-fixed-top {
    top: 0;
  }
  
  .navbar-fixed-bottom {
    bottom: 0;
  }
  
  .navbar .nav {
    position: relative;
    left: 0;
    display: block;
    float: left;
    margin: 0 10px 0 0;
  }
  </code></pre>