I'm having a few problems with my first attempt at converting a site to all CSS.

My style sheet is as follows:

Code:
body {
 background-image: url(bg.gif);
 margin: 0px
 }
#header { 
 position: absolute;
 left: 50%;
 margin-left: -375px;
 width: 750;
 background-color: #990000;
 border-bottom: solid white 1px;
 }
#logo {
 display: inline;
 width: 448;
 height: 120px;
 }
 
#nav {
 display: inline;
 width: 151px;
 height: 120px;
 padding: 10px;
 border-left: solid white 1px;
 }
#navitem {
 padding-left: 5px;
 padding-right: 5px;
 padding-top: 2px;
 padding-bottom: 2px;
 }
#navitem A {
 font-weight: bold;
 font-family: verdana;
 font-size: 8pt;
 color: #ffffff;
 text-decoration: none;
 }
my HTML page is as follows

Code:
<div id="header">
  <div id="logo"><img src="header.jpg" width=448 height=120 alt="Ewebbed Design"></img></div>
  <div id="nav">
   <div id="navitem"><a href="index.html">Web Design</a></div>
   <div id="navitem"><a href="index.html">Web Development</a></div>
   <div id="navitem"><a href="index.html">Web Services</a></div>
   <div id="navitem"><a href="index.html">E-Commerce</a></div>
   <div id="navitem"><a href="index.html">Printed Media</a></div>
  </div>
  <div id="nav">
   <div id="navitem"><a href="index.html">Home</a></div>
   <div id="navitem"><a href="index.html">About Us</a></div>
   <div id="navitem"><a href="index.html">Portfolio</a></div>
   <div id="navitem"><a href="index.html">Contact Us</a></div>
  </div>
</div>
but the output looks like:



if you notice - there is a space at the top of the 2 nav sections, and 1 below the logo section. any idea on how I would do this.

Also - on another note - how would I make the navitem div's change background colour when rolled over, their CSS looks like this: