Unwanted Horizontal Scroll


I have an unwanted horizontal scroll bar. I have included the html and css below. This is a work in progress so not perfect.

I have tried changing the widths on several elements without any change. It does the same in IE and Chrome.

<div id="container">
	<div id="header">
	<div class="header_right"></div>
		<h1>Put your site name here</h1>
	<div id="navigation">
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact us</a></li>

images in a horizontal scrolling liquid design.

the title allready says it. I am currently working on a liquid design within a one-page horizontal scrolling design. which surprisingly doesnt give that much complications, the is just one thing I can't figure out. Perhaps I should explain what I am working on first.



<html lang="nl">
<link rel="stylesheet" href="reset.css" type="text/css" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

Horizontal Scroll Bar at the bottom of my website???

Hello, I need to get rid of the horizontal scroll bar at the bottom of my website page. I have tried everything! Overflow: hidden, overflow: auto, etc etc. It will not seem to go away!

Some questions I have....
1) is my background image too large producing the scrolling bar?
2) when I do put an overflow: hidden on my body tag, then my drop down navigation menu moves so I need to know why that is getting messed up when I try to fix the horizontal scroll bar in the body tag

Here is the url

Here is the css file

Syndicate content