[PhilJ]

Yages, your header right hand column is probably larger in height... probably the reason the logo has the bottom gap.

The grid system is pretty straightforward, it uses the 960.gs system, but modified to be flexible width, ie. use % instead of px.

Here's some example code to show a variety of layouts...

<div class="grid_4">
    <p class="box">Column 4/16</p>
</div>
<div class="grid_12">
    <p class="box">Column 12/16</p>
</div>
<div class="clearing"></div>

<div class="grid_4">
    <p class="box">Column 4/16</p>
</div>
<div class="grid_4">
    <p class="box">Column 4/16</p>
</div>
<div class="grid_8">
    <p class="box">Column 8/16</p>
</div>
<div class="clearing"></div>

<div class="grid_4">
    <p class="box">Column 4/16</p>
</div>
<div class="grid_4">
    <p class="box">Column 4/16</p>
</div>
<div class="grid_4">
    <p class="box">Column 4/16</p>
</div>
<div class="grid_4">
    <p class="box">Column 4/16</p>
</div>
<div class="clearing"></div>

<div class="grid_8">
    <p class="box">Column 8/16</p>
</div>
<div class="grid_8">
    <p class="box">Column 8/16</p>
</div>
<div class="clearing"></div>

<div class="grid_3">
    <p class="box">Column 3/16</p>
</div>
<div class="grid_13">
    <p class="box">Column 13/16</p>
</div>
<div class="clearing"></div>

<div class="grid_5">
    <p class="box">Column 5/16</p>
</div>
<div class="grid_11">
    <p class="box">Column 11/16</p>
</div>
<div class="clearing"></div>

<div class="grid_7">
    <p class="box">Column 7/16</p>
</div>
<div class="grid_9">
    <p class="box">Column 9/16</p>
</div>
<div class="clearing"></div>

Demo

Try testing by pasting into a static page.

The header can use up to 12 columns, the body content uses 16 columns.

There's no need to modify grid.css unless you know what you're doing.