I am having a problem coding my web site, Please see attached screenshot for a visual.

Here is the css and HTML code

<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav_bar {
	height: 50px;
	width: 350px;
	margin: 0px;
	padding: 0px;
#nav_bar li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	display: inline;
	text-align: center;
	float: left;
	height: 50px;
#nav_bar a {
	display: block;
	height: 50px;
#nav_bar a:hover {
	background-color: #CCC;

<div id="nav_bar">
<li id="home"><a href="#">Home</a></li>
<li id="about"><a href="#">About Us</a></li>
<li id="gallery"><a href="#">Gallery</a></li>
<li id="contact"><a href="#">Contact</a></li>

If you can see by the pic the boxes are not lining up and are throwing the whole navigation system off..... Any help would be appreciated...


This should help

ul{display:block; height: 50px; margin: 0px; padding: 0px;}

The problem is that your list element ul is the only one with no exact size so he plays on different rules :)
There are different approaches when styling but mixing ways leads to unwanted results.

Also I see that you're applying same code for parent and children elements which makes it obvious that you are not quite familiar with the css behaviour.
Here are some sites for you:


Just explore the behavior of the different values when applying and don't rush adding more more code makes it difficult to separate behaviors :)

I used the method and it worked great.. Thanks for the help..