I am having an odd issue where if I resize the browser window down and try to scroll to towards the right, the footer and the header strip won't stretch across. I am not sure why that is happening. I have attached the files and a screenshot.

JustPixelsScreen 2.jpg

Here is the CSS:

/** Global Styles **/

img {border: 0;}

html, body {height: 100%;}

/** global page styles **/

#strip {width: 100%; height: 17px; top: 0px; background-color: #2e2e2e;}

#wrapper {position: relative; width: 940px; margin: 0 auto -200px; min-height: 100%; height: auto !important;}

#site_logo {position: relative; width: 275px; top: -17px;}

#site_logo a:link {font-family: Pacifico, Arial, Helvetica; text-decoration: none; display: block; padding: 16px 0 0 25px; font-size: 28px; height: 55px; border-radius: 0 0 5px 5px; background-image: url("../images/logo_bg.png"); background-repeat: no-repeat; background-color: #5a87aa; color: #1e3c55}

#site_logo a:visited, a:hover {color: #1e3c55;}

#portfolio {width: 940px; height: 425px; background-color: #fff; margin-bottom: 65px;}

#portfolio > ul > li {float: left; width: 459px; height: 425px; background: url("../images/t_bg.jpg") no-repeat; margin-right: 21px;}

#portfolio li:last-child {margin-right: 0px;}

#portfolio img {position: relative; top: 20px; left: 20px;}

#portfolio a {background: none;}

.title {font-family: bariol_boldbold, Helvetica, sans-serif; text-transform: uppercase; color: #5a87aa; margin: 40px 0px 10px; font-size: 24px;}

.push {height: 200px;}

/** site nav **/

#site_nav {position: absolute; font-size: 20px; font-family: bariol_boldbold, Helvetica, sans-serif; top: 15px; right: 0px; font-weight: bold; text-transform: uppercase;}

#site_nav ul li {float: left; padding-right: 30px;}

#site_nav li:last-child {padding-right: 0px;}

#site_nav a {display: block; text-decoration: none;}

#site_nav a:link {color: #2e2e2e;}

#site_nav a:visited {color: #2e2e2e;}

#site_nav a:hover {color: #5a87aa;} 

#site_nav a.active {color: #5a87aa;}

/** content **/

#intro {font-family: bariol_boldbold, Helvetica, sans-serif; clear: both; color: #696969; margin-bottom: 65px; line-height: 45px;}

.intro_text {font-size: 40px;}

.name {text-transform: uppercase; color: #5a87aa;}

/** footer **/

.arrows {position: relative; width: 100%; height: 19px; background: url("../images/arrows.jpg"); background-position: left top;}

#footer_bar {position: relative; width: 100%; height: 200px; background-color: #5a87aa; background: url("../images/bs_pattern.jpg");}

.skillset {width: 940px; margin: 0 auto; padding: 40px 0 25px;}

.skillset > dl {font-family: bariol_boldbold, Helvetica, sans-serif; font-size: 20px;}

.skillset dt {padding-bottom: 5px; color: #456985;}

.skillset dd {padding-bottom: 25px; color: #fff;}

#copyright_bar {font-family: bariol_boldbold, Helvetica, sans-serif; font-size: 12px; height: 31px; background-color: #2e2e2e;}

.copyright_txt {width: 940px; margin: 0 auto; overflow-x: none;}

.copyright_txt > p {float: right; color: #8d8d8d; text-transform: uppercase; padding: 10px 0 0 0;}
Here is the HTML markup:

<!DOCTYPE html>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
		<title>Just a Few Pixels</title>
		<link rel="stylesheet" href="css/reset.css" title="mainlayout" type="text/css" media="screen">
		<link rel="stylesheet" href="css/styles.css" title="mainlayout" type="text/css" media="screen">
		<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
		<link href='css/typography.css' rel='stylesheet' type='text/css'>
		<!-- top strip-->
		<div id="strip">
		<!-- endstrip--></div>		
		<!-- start wrapper-->
		<div id="wrapper">

			<!-- start header-->
			<div id="header">
				<!-- logo-->
				<div id="site_logo">
					<h1><a href="index.html">Just a Few Pixels</a></h1>
				<!-- end logo-->
				<!-- main navigation-->
				<div id="site_nav">
					<ul class="nav">
						<li><a class="active" href="index.html">Home</a></li>
						<li><a href="#">Resume</a></li>				
				<!-- main navigation-->
			<!-- end header -->		
			<!-- start portfolio-->
			<h2 class="title">Portfolio</h2>
			<div id="portfolio">	
					<li><a href="index.html"><img src="images/portfolio/thumbnail_1.jpg" alt="Website Thumbnail" /></a></li>
					<li><a href="index.html"><img src="images/portfolio/thumbnail_2.jpg" alt="Website Thumbnail" /></a></li>				
			<!-- end portfolio-->
			<!-- start intro-->
			<div id="intro">
				<p class="intro_text">I am <span class="name">Hussain Raja</span>. I am a Web Designer based in Northern Virginia.</p>
			<!-- end intro-->
			<div class="push"></div>
		<!-- end wrapper-->	
		<!-- footer bar-->
		<div id="footer_bar">
			<!-- arrows -->
			<div class="arrows">
			<!-- end arrows -->
			<!-- start skillset-->
			<div class="skillset">
					<dd>HTML, CSS</dd>
					<dd>Adobe Photoshop, Adobe Illustrator, Adobe Indesign, Microsoft Office</dd>
			<!-- end skillset-->
		<!-- end footer bar-->	
		<!--start copyright-->
		<div id="copyright_bar">
			<!--copyright text-->
			<div class="copyright_txt">
				<p>Copyright &copy; Just a Few Pixels</p>
			<!-- end copyright_txt -->

		<!--end copyright bar-->	
I have also attached the files in case you need them.