HTML & CSS Help

[Feronix]

Heya guys,

This morning I started working on a personal site for... well, me!
(Hence all the red boxes where I censored my name and face)

I have a problem placing my menu however. I'm quite new to HTML and CSS and honestly cannot figure out what I'm doing wrong so I figured maybe some of the more advanced people could help me out here.

I want the main body of the site to have a width of 720 pixels so that it's viewable on pretty much any monitor (and even most smartphones and tablets without having to make a mobile site for now). The header image is also 720px wide, so are the main content div and the footer, but I cannot figure out the menu (between the header image and main content).

It seems to place it more to the right, causing the last menu button to be put on a second row, rather than inlining/floating next to the rest of them. Can anyone have a look and maybe figure out what I did wrong, cause I have no idea what I'm doing at this point

Edit:

I've got it aligned now by setting the .menu a to
width: 134px;
padding: 15px 5px 15px 5px;

ul {
padding-left: 0;
margin-left: 0;
padding-top: 0;
margin-top: 0;
}

But there's still a white line (of the .divbody background-color) between the header image and the menu.
Anyone has an idea how I can get rid of that?

Edit 2:
Fixed! The problem was that the header (having an Anchor tag to redirect to index.HTML) was moved up a few pixels for some reason. Had some help from a nice bloke and fixed it by adding a .header a class in CSS and giving it:
height: 240px;
float: left;



Pre-edit screenshots:

 

[SPS]

Looks like you've solved the issue? For future reference, I find F12 in chrome (developer tools) very handy. You can even emulate mobile devices.

 

[BigBlue1]

Nice catch, there are a lot of tools and lessons for all levels of coders here
I have used this information for years.