title: Mysterious whitespace in between Bootstrap2 Navbar and row underneath
body: <p>I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar.  However, for some reason there is whitespace between this Navbar and the image.  When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing .  I have tried to fix this by using CSS to bottom-align the navbar, to no avail.</p>
  
  <p>How can I eliminate this whitespace?  </p>
  
  <pre><code>&lt;!-- Top Navigation Bar --&gt;
  &lt;div class="row" id="rowTopLinkNavBar"&gt;
      &lt;div class="span6 offset3" id="divTopLinkNavBar"&gt;
          &lt;div class="navbar" id="topLinkNavBar"&gt;
              &lt;div class="navbar-inner" style="font-size: 16px;"&gt;
                  &lt;ul class="nav"&gt;
                      &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;a href="#"&gt;PROJECTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;a href="#"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;a href="#"&gt;THE TEAM&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;a href="#"&gt;EVENTS&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;a href="#"&gt;MEETINGS&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;RESOURCES&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!--Background Image--&gt;
  &lt;div class="row" id="rowBackgroundImg"&gt;
      &lt;div class="span6 offset3" id="backgroundImg"&gt;
      &lt;!-- background image is set in CSS --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my desperate attempt at fixing this issue using CSS:</p>
  
  <pre><code>#backgroundImg
  {
      color: #ff0000;
      background-color: #000000;
      /*width: 709px;
      height: 553px;*/
      background: url('../images/someImage.jpg') no-repeat;
      background-size: 100%;
      height: 700px;
      border-radius: 0px;
      background-position: center;
      vertical-align: top;
      background-position: top;
  }
  
  
  
  #divTopLinkNavBar
  {
      vertical-align: bottom;
  }
  
  #topLinkNavBar
  {
      padding-bottom: 0px;
  }
  #rowBackgroundImg
  {
      padding-top: 0px;
  }
  
  .navbar
  {
      vertical-align: bottom;
  }
  </code></pre>