title: Positioning a div in grid 960 is adding mystery padding / margin
body: <p><em>Browsers tested in:  Chrome, IE, Firefox.
  Problem is that BusinessNav ID keeps getting pushed over 3 columns.</em></p>
  
  <p>Here's what I want the page to look like <a href="http://www.designobvio.us/dov2/Homepage1.pdf" rel="nofollow">http://www.designobvio.us/dov2/Homepage1.pdf</a></p>
  
  <p>I definably can hack this code to make the positioning work.  But as you can see theres still so much more page left.  If I start hacking now it's definably going to get progressively more ugly.</p>
  
  <p>First here's the site: <a href="http://designobvio.us/dov2/index.html" rel="nofollow">http://designobvio.us/dov2/index.html</a> 
  (I've highlighted potential problem areas)</p>
  
  <p>CSS styles: search /*<em>User Styles *</em>/ (there are only a few)</p>
  
  <p>heres the low down:  </p>
  
  <pre><code>  &lt;div id="businessNav" class="grid_3 "&gt;
     &lt;h2&gt;Relationship&lt;/h2&gt;
     &lt;h2&gt;Wages&lt;/h2&gt;
     &lt;h2&gt;Common Sense&lt;/h2&gt;
     &lt;h2&gt;Forward Thinker&lt;/h2&gt;
     &lt;h2&gt;Learning&lt;/h2&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>this chunk of code is being afflicted by:</p>
  
  <pre><code>  &lt;div id="heresWhy" class="grid_3"&gt;
     &lt;h1&gt;And Here's Why&lt;/h1&gt;
     &lt;p&gt;...&lt;p&gt; 
    &lt;/div&gt;
  </code></pre>
  
  <p>Or</p>
  
  <pre><code>&lt;div id="headerBusiness" class="grid_6"&gt;
    &lt;h1&gt;Business&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Anyone see the discrepancy in my code?
  Thanks everyone</p>