Q:

to remove the margin (padding) between header menu and the following container (row?) in Twitter Bootstrap

I hope this question is not repetitive, although I have searched and could not find. I am designing the following page. How can I design it in such a way that there is no margin between the menu and the background image below it?
http://www.northeastern.edu/sds/web/demos/index2.shtml
(I think it is one margin-bottom for the header, or the navbar menu, and a margin-top for the container, or the row)
I want to have a final design to look like the following page:
http://woods.stanford.edu/
following is the simplified of the HTML code:
Thank you for your help.
<!DOCTYPE html>

<body>
    <header class="page-header">
   <div class="navbar navbar-inverse">
    <div class="navbar-inner">
      <div class="container">
        <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        </button>
      </div>
    </div>
  </div>

</header>
  <div class="container">
    <div class="row">
        <div class="span10 offset1" style="background-image: url('images_002/themap.png')">
            <div class="row">
                <div class="span12"><br><br><br><br><br><br></div>
            </div>
            <div class="row">
                <div class="span3 offset6 alert alert-block">
                    <p>Our methodological approaches have been interdisciplinary, blending concepts and leveraging methods and insighhts developed across     multiple domains in the sciences and engineering<br><br><i class="icon-arrow-right"></i> <a href="www.northeastern.edu/sds">LEARN     MORE ABOUT THE SDS GROUP</a></p>
                </div>

            </div>
            <div class="row">
                <div class="span12"><br><br><br><br><br><br></div>
            </div>
        </div>
    </div>
    <div class="row"></div>

</div>
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/linkhover2_06_28.js"></script>
</body>

A:

If you inspect your page you would see that your page-header has bottom padding and also margin (in addition to a light gray border) which adds unwanted space. See the screenshot below:

After you remove them you could add an id to your main container and give it a negative top margin. Something like this: (You won't need this if you structure your page well. )
html
.
.
.
</header>
<div class="container" id="map">
.
.
.

CSS
#map{
margin-top:-40px;
}

Again a better idea would be to structure your page according to bootstrap rules and remove tags like <br>.
The inspector also shows that the css is in bootstrap.css. Although it is not related to your problem, you should put your custom css in a new file and leave bootstrap untouched.

