title: How to reduce the margin between two rows/containers in Twitter Bootstrap?
body: <p>I have two rows in two containers, but I can't figure out how to reduce  the bottom and top margin/padding to bring the content closer.</p>
  
  <p>The <code>bottom content</code> is way too far and I would like to bring it closer to the first row/container.
  I tried to apply padding and margin to the rows and containers with no luck.</p>
  
  <p>Here's a <a href="http://jsfiddle.net/6pbPd/" rel="nofollow">fiddle</a> of the html below.</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" /&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $(document).ready(function () {
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span12"&gt;
                  &lt;ul id="top-nav" class="nav"&gt;
                      &lt;li data-current-nav="Home"&gt;&lt;a href="/Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="container-fluid"&gt;
          &lt;div class="row-fluid"&gt;
              &lt;div class="span12"&gt;
                  bottom content
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>