Inexplicable gap between header and Nav bar

Hi there...

I'm pretty new to this, but I've given myself the task of having rounded corners on my website. The problem is I have a left and right div to hold the rounded edges and the navigation in between with a repeating gradient image, however, there's about a 20px gap between the header and the middle nav div, even though the left and right are flush to it.

Here's what it should be like...

http://www.emuspace.co.uk/canarytest/home.jpg

but here's what it's coming out as...

http://www.emuspace.co.uk/canarytest/canaryindex.html

If there's not a simple solution to this, is there a better way of achieving the same effect?

Thanks in advance!

Emu x

Try adding:

margin-top: 0px;

to

ul#list-nav

Which is in line 55 or so of your CSS...

It looks like there is a style clash between your ul#list and the nav. This might fix it.

Brilliant! Thankyou. I'd thought of zeroing the margins before, but I only applied it on the wrong element and so it didn't work. Thanks again.