I have a website with a fairly basic layout that is aligning left in smart phones - or at least in the iPhone. If anyone has any idea how to remedy this then I'd HUGELY appreciate it!

These are the styles:
HTML Code:
body {
       background-color: #e7e7e7;
}
#header {
        height: 150px;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFFFFF;

}
#header_inner {
        height: 150px;
	width: 980px;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}
#content {
        width: 980px;
        margin-right: auto;
        margin-left: auto;
        
}
#footer {
        background-color: #00703c;
	width: 100%;
	padding-bottom: 10px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
}
#footer_inner {
        width: 980px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 10px;
	color: #FFFFFF;
}
This is the HTML layout:

HTML Code:
<body>
      <div id="header">
            <div id="header_inner"></div>
      </div>
      <div id="content"></div>
      <div id="footer">
            <div id="footer_inner"></div>
      </div>
</body>
Displayed on the computer, the content section is perfectly centered with the gray body background on either side. In a smart phone (iPhone) the content butts up against the left side of the screen, and everything is cut short on the left.

Any ideas why?