Add image below navbar in Twitter bootstrap

Question

I'm facing a problem with Bootstrap due to lines:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/"></a>
        </div>
    </div>
</div>

<div id="main_top">
    <div class="container">
        <div class="row">
            <div class="span12">
                            ...

In the main_top I have a background image. The problem happens when I resize the browser due to the following code:

@media (max-width: 979px)
.navbar-fixed-top {
margin-bottom: 20px;
}

Basically, when browser width < 979, there's a white line due to 20px margin.

Could you help me to fix it? I also created a sample here: http://jsfiddle.net/TxRgF/

Answer 1

Working DEMO

What about this:

@media (max-width: 979px){
    body{
      padding-left:0 !important;
      padding-right: 0 !important;
    }

   .navbar-fixed-top {
      margin-bottom: 0px !important;
   } 

}

Answer 2

At that width, the body has left and right padding. Add this class at the end of your CSS.

@media (max-width: 767px){
  body {
   padding-left:0 !important;
   padding-right: 0 !important;
 }
}

http://jsfiddle.net/simply_simpy/ryjMT/2/

You will need to add padding to other elements to compensate. ​