Content div is shifted left from header div

I’m working on an internal project. When I run my code from Notepad++, in all browsers except Firefox, the content area appears shifted left from the header. If I click minimize, then maximize, it straightens up. I can’t share a link since it’s not on the web, but I’ll include my code. I tried adding screenshots but kept getting en error on upload. I looked at resizePanel() and adjusted some CSS but nothing worked.


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Scroll Horizontally</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen"  />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<!--<script type="text/javascript" src="js/jquery-1.3.2.js"></script>-->

<script>

$(document).ready(function() {

	$('a.panel').click(function () {

		$('a.panel').removeClass('selected');
		$(this).addClass('selected');
		
		current = $(this);
		
		$('#wrapper').scrollTo($(this).attr('href'), 800);		
		
		return false;
	});

	$(window).resize(function () {
		resizePanel();
	});
	
});

function resizePanel() {

	width = $(window).width();
	height = $(window).height();

	mask_width = width * $('.item').length;
		
	$('#debug').html(width  + ' ' + height + ' ' + mask_width);
		
	$('#wrapper, .item').css({width: width, height: height});
	$('#mask').css({width: mask_width, height: height});
	$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
		
}
/*
$(document).ready(function(){
	$(".trigger").click(function(){
		$(".panel1").toggle("fast");
		$(this).toggleClass("active");
		return false;
	});
});*/
</script>


</head>
<body>

<div id="wrapper">

	<div id="container1">
		<div id="header">
			<div id="header-logo" ><img src="img/big_corn_green.png" width="800" height="200" border="0" ></div>			
			<div id="nav">
				<div class="menu">
					<ul>
						<li><a href="#item1" class="panel">Home</a></li>
						<li><a href="#item2" class="panel">Hiring Process</a></li>
						<li><a href="#item3" class="panel">Educational Partner</a></li>
						<li><a href="#item4" class="panel">Funding</a></li>
						<li><a href="#item5" class="panel">FAQ</a></li>
						<li><a href="#item6" class="panel">Contact Us</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	
	<div id="mask">

		<div id="item1" class="item">			
			<a name="item1"></a>
			<div class="content">item1

			</div>
		</div>

		<div id="item2" class="item">
			<a name="item2"></a>
			<div class="content">
				<article class="accordion">
					<section id="acc1">
						<h2><a href="#acc1">Flurries</a></h2>
						<p>This content appears on page 1.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
						<p class="accnav"><a href="#acc2">next &#10151;</a></p>
					</section>
	
					<section id="acc2">
						<h2><a href="#acc2">Shakes</a></h2>
						<p>This content appears on page 2.</p>
						<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.</p>
						<p class="accnav"><a href="#acc3">next &#10151;</a></p>
					</section>
	
					<section id="acc3">
						<h2><a href="#acc3">Slushes</a></h2>
						<p>This content appears on page 3.</p>
						<p>Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu.</p>
						<p class="accnav"><a href="#acc4">next &#10151;</a></p>
					</section>
	
					<section id="acc4">
						<h2><a href="#acc4">Sundaes</a></h2>
						<p>This content appears on page 4.</p>
						<p>Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.</p>
						<p class="accnav"><a href="#acc5">next &#10151;</a></p>
					</section>
	
					<section id="acc5">
						<h2><a href="#acc5">Cones</a></h2>
						<p>This content appears on page 5.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
						<p class="accnav"><a href="#acc6">next &#10151;</a></p>
					</section>

					<section id="acc6">
						<h2><a href="#acc6">Sandwiches</a></h2>
						<p>This content appears on page 6.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
						<p class="accnav"><a href="#acc7">next &#10151;</a></p>
					</section>					

					<section id="acc7">
						<h2><a href="#acc7">Sides</a></h2>
						<p>This content appears on page 7.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
						<p class="accnav"><a href="#acc8">next &#10151;</a></p>
					</section>					

					<section id="acc8">
						<h2><a href="#acc8">Beverages</a></h2>
						<p>This content appears on page 8.</p>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.</p>
						<p class="accnav"><a href="#acc1">next &#10151;</a></p>
					</section>					
				
				</article>
			</div>
		</div>
		
		<div id="item3" class="item">
			<a name="item3"></a>
			<div class="content">item3
	
			</div>
		</div>

		<div id="item4" class="item">
			<a name="item4"></a>
			<div class="content">item4

			</div>
		</div>
		
		<div id="item5" class="item">
			<a name="item5"></a>
			<div class="content">item5

			</div>
		</div>
		
		<div id="item6" class="item">
			<a name="item6"></a>
			<div class="content">item6

			</div>
		</div>
	</div>


</div>

</body>
</html>




body {height: 400px; width:960px; margin:0;padding:0; overflow:hidden;
}
#container {width: 960px; height: 200px; z-index: 500; border:5px solid red;  }
#wrapper {width:100%; height:100%; position:absolute; top:0; left:0; background-color:#00005f; overflow:hidden;}

#mask {width:600%; height:100%; background-color:#eee; z-index: 5;}

	.item {width:16%; height:100%; float:left; background-color: #d3e4ee;}

	.content {width:940px; height:485px; top:250px;  margin:0 auto; background-color: #74abca; position:relative; padding: 10px; /*border-radius: 7px; box-shadow: 1px 1px 1px #888; opacity:0.8; filter:alpha(opacity=80);*/ z-index: 10;}
	.selected {background: #EEEEEE repeat-x 0 -40px; color: #00005F; border-top: none; border-radius: 7px; box-shadow: 1px 1px 1px #888;}
	.selected a {color: #00005F;  }
	.clear {clear:both;}

body {font-family: "Segoe UI", arial, helvetica, freesans, sans-serif; font-size: 90%; color: #333; background-color: #e5eaff; margin: 10px; z-index: 1;}
h1 {font-size: 1.5em; font-weight: normal; margin: 0;}
h2{font-size: 1.3em; font-weight: normal; margin: 2em 0 0 0;}
p{margin: 0.6em 0;}	
p.accnav {font-size: 1.1em; text-transform: uppercase; text-align: right;}
p.accnav a {text-decoration: none; color: #999;}
article.accordion {display: block; width: 750px; margin: 0 auto; margin-top: 15px; background-color: #81E0F4; overflow: auto; border-radius: 5px; /*box-shadow: 0 3px 3px rgba(0,0,0,0.3);*/}
article.accordion section {position: relative; display: block; float: left; width: 2em; height: 22em; margin: 0.5em 0 0.5em 0.5em; color: #00005F; background-color: #00005F; overflow: hidden; border-radius: 3px;}
article.accordion section h2 {position: absolute; font-size: 1em; font-weight: bold; width: 12em; height: 2em; top: 12em; left: 0; text-indent: 1em; padding: 0; margin: 0;
	color: #ddd; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;
	-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg);}
article.accordion section h2 a {display: block; width: 100%; line-height: 2em; text-decoration: none; color: inherit; outline: 0 none;}
article.accordion section, article.accordion section h2 {-webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
article.accordion section:target {width: 30em; padding: 0 1em; color: #333; background-color: #fff;}
article.accordion section:target h2 {position: static; font-size: 1.3em; text-indent: 0; color: #333; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);} 	

/******************************
*  Header
******************************/

#header {background-color: #00005f; height: 250px; width: 960px; position: fixed; margin:0 auto;  }
#header-logo {margin-left: 0px; margin-top: 0px; float: left; }
#header-logo img {background-color: #00005f;}
#facebook {margin-top: 20px; float: right; margin-right: 20px;}
#container1 {width:960px; margin:0 auto; position:relative; z-index: 2000;}
#nav {font-family: Century Schoolbook; font-size: 16px; font-style: normal; margin: 135px 0 0 -20px; padding-top: 8%; padding-left: 5%;}
#nav a {padding-left: 15px; margin-left: 15px; color: #93b431; }
.menu{color: #84E4F7; font-family: Century Schoolbook; position:absolute; margin: -20px -20px 0 0px; width:960px; text-transform: uppercase; z-index:9999;}
.menu ul {margin-left: -55px; color: #84E4F7; font-size:16px; float:left; line-height: 100%; background: repeat-x 0 -110px; z-index:999;}
.menu ul li  { color: #84E4F7; margin: 0 0px;  padding: 0 0 8px; float: left; position: relative; list-style: none;}
.menu ul a {  /*color: #84E4F7;*/ text-decoration: none; display: block; padding:  8px 15px; margin: 0;  border:none;}
.menu ul a:hover {background: #000; color: #FDC216;}
.menu ul .current_page_item a, .menu ul li:hover > a {background: #EEEEEE repeat-x 0 -40px; color: #FDC216; border-top: none; border-radius: 7px; box-shadow: 1px 1px 1px #888;}
.menu ul li:hover > ul {display: block;}
.menu ul:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.menu ul {display: inline-block;}
html[xmlns] .menu ul {display: block;}
* html .menu ul {height: 1%;}


I’m not trying to be offensive, but this page is coded so poorly I don’t want to give just a one line fixer.

Can you show us what your end result will be like? Why do you have position:relative on so many thigns? On the light blue section of the website, what in the world is going on there? You have item1-5, and floating implying you want them all on the smae line. You give the #mask a width of 600%(???) item1 container width:16% and the inner child a width of like 940px. What??? 600%, 16%, and 940px. Don’t even know what to make of that.

I’d honestly scratch this attempt and PROPERLY code it.

I will say that the reason it is happening is due to those errors I just mentioned. I don’t even know what you hope to achieve and can’t really offer a fix due to that.