Hi there, I'm a beginner and followed a tutorial on creating a sprite menu. I'm having some issues with it though. It's cut off, pushed down, and to the right when I look at my site. I want it to fit within my 'main-nav' div.

Any help would be so greatly appreciated!
Code CSS:
}
	#main-nav {
	background-color: #FFFFFF;
	height: 50px;
	padding-bottom: 13px;
	padding-top: 1px;
	clear: both;
}
ul#main-nav {
	width: 800px;
	list-style: none;
}
 
ul#main-nav li { display: inline; }
 
ul#main-nav li a {
	display: block; float: left; height: 50px; 
	background-image: url(nav.png); text-indent: -9999px;
}
 
	ul#main-nav li a.home {
		width: 84px; background-position: 0 0;	
	}
 
	ul#main-nav li a.about {
		width: 98px; background-position: -84px 0;	
	}
 
	ul#main-nav li a.entertainers {
		width: 98px; background-position: -182px 0;	
	}
 
	ul#main-nav li a.live {
		width: 99px; background-position: -280px 0;	
	}
 
	ul#main-nav li a.performance {
		width: 97px; background-position: -379px 0;	
	}
	ul#main-nav li a.upgrades {
		width: 97px; background-position: -476px 0;	
	}
	ul#main-nav li a.contact {
		width: 98px; background-position: -573px 0;	
	}
	ul#main-nav li a.design {
		width: 96px; background-position: -671px 0;	
	}
 
	ul#main-nav li a.home:hover, ul#main-nav li a.home:focus {
		background-position: 0 -50px;	
	}
 
	ul#main-nav li a.about:hover, ul#main-nav li a.about:focus {
		background-position: -84px -50px;	
	}
 
	ul#main-nav li a.entertainers:hover, ul#main-nav li a.entertainers:focus {
		background-position: -182px -50px;	
	}
 
	ul#main-nav li a.live:hover, ul#main-nav li a.live:focus {
		background-position: -280px -50px;	
	}
 
	ul#main-nav li a.performance:hover, ul#main-nav li a.performance:focus {
		background-position: -379px -50px;	
	}
	ul#main-nav li a.upgrades:hover, ul#main-nav li a.upgrades:focus {
		background-position: -476px -50px;	
	}
	ul#main-nav li a.contact:hover, ul#main-nav li a.contact:focus {
		background-position: -573px -50px;	
	}
	ul#main-nav li a.design:hover, ul#main-nav li a.design:focus {
		background-position: -671px -50px;	
	}
 
a { outline: none; }
Code HTML4Strict:
<div id="page-container">
 
	<div id="header"></div>
 
  <div id="main-nav">
    <ul id="main-nav">
		<li><a href="#home" class="home">home</a></li>
        <li><a href="#about" class="about">about</a></li>
        <li><a href="#entertainers" class="entertainers">entertainers</a></li>
        <li><a href="#live" class="live">live</a></li>
        <li><a href="#performance" class="performance">performance</a></li>
        <li><a href="#upgrades" class="upgrades">upgrades</a></li>
        <li><a href="#contact" class="contact">contact</a></li>
        <li><a href="#design" class="design">design</a></li>
	</ul>
    </div>