title: 960 grid system - nested grids have layout problem
body: <p>I've just started developing a hobby site for myself, and trying to use the <a href="http://960.gs/" rel="noreferrer">960 css grid system</a> to layout my html elements on screen.</p>
  
  <p>I got the basic idea and just implemented a skeleton website <a href="http://mindinscription.net/webapp/coastalbooks/" rel="noreferrer">here on my server</a></p>
  
  <p>There are several questions I've got so far:</p>
  
  <pre><code>&lt;div class="container_12"&gt;
  &lt;div class="grid_12"&gt;
      &lt;div id='top_bar' class='grid_insider'&gt;&lt;!-- start of #top_bar --&gt;
  
          &lt;ul id='top_menu' class='grid_5'&gt;&lt;!-- start of #top_menu --&gt;
              &lt;li&gt;Home&lt;/li&gt;
              &lt;li&gt;Fake1&lt;/li&gt;
              &lt;li&gt;Fake2&lt;/li&gt;
              &lt;li&gt;Fake3&lt;/li&gt;
          &lt;/ul&gt;&lt;!-- end of #top_menu --&gt;
          &lt;ul id='user_panel' class='grid_2 prefix_4'&gt;&lt;!-- start of #user_panel --&gt;
  
              &lt;li&gt;log in&lt;/li&gt;
              &lt;li&gt;faq&lt;/li&gt;
          &lt;/ul&gt;&lt;!-- end of #user_panel --&gt;
  
      &lt;/div&gt;&lt;!-- end of #top_bar --&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div id='title_bar' class="grid_12"&gt;
      &lt;h1 id="logo" align='center'&gt;LOGO, TITLE and SLOGAN all go here!&lt;/h1&gt;
  
  &lt;/div&gt;&lt;!-- end .grid_1 --&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>I am using a grid 12 based template, hence the total number of "grids" on each "row" should be 12. However, I can only make the two elements on the same "row" with total number of grids added up to 11, but not 12. If I change the #user_panel"'s class to "grid_3 prefix4", then that would actually take this element to the next line, which breaks everything.</p>
  
  <p>Another thing is, although the first-level elements such as the top_bar and title_bar are on the right position (you can confirm that using a handy Firefox plugin <a href="http://www.puidokas.com/portfolio/gridfox/" rel="noreferrer">gridfox</a>), with exact width of 940px, the nested grids are not in positions they are supposed to be (a bit away from the designed positions). </p>
  
  <p>I am new to this css grid system, is there a better way to manage the nest elements? I have to say some of the sample websites on the 960.gs are quite amazing to see :)</p>
  
  <p>Thanks for any suggestion in advance!</p>
  
  <p><strong>Updated Info</strong></p>
  
  <p>Okay, based on the answer below, I reckon it is still possible to use colored borders when debugging the nested grids, there is an adhoc way to "cheat":</p>
  
  <pre><code>.grid_insider
  {
      border : 1px solid red;
      margin : -1px; /* this will stop the element from 'expanding' its space */
  }
  </code></pre>