i have a 960 container.

http://moneyzzsharma.site90.net/

what i had done:

container{
1st outerwrapper(named s1) for 1st div and then 1st div is given width:960 and margin center. Outerwrapper is given margin:0px -300px;

this same thing is applied to the 2nd outerwrapper(named "s2")(the one having FOODIE logo).

ALSO HTML{OVERFLOW-X:HIDDEN;}

it works fine on pc which is having more than 960px width. But on Cellphone(NOT IN OPERA BROWSER) extra right portion is seen. what should i do to make it correct?
coding of 1stouterwrapper(s1) and 2nd outer wrapper(s2) is :
Code:
.s1{
z-index:-4;
margin:0px -300px;
height:55px;
background-image:url(images/topbg.png);


}

.s2{
z-index:-5;
margin:-10px -300px;
height:140px;
background-image:url(images/bluebg.jpg);

}
darkbluecontent is the inner container of s1
and lightbluecontent is the inner container of s2

their coding are:
Code:
.darkbluecontent{
margin:0 auto;
position:relative;
top:10px;
width:960px;
height:32px;
}

.lightbluecontent{
margin:0px auto;
	clear:left;
	position:relative;
top:4px;
width:960px;
height:136px;
}

body{

width:100%;
	margin:0;
	padding:0;
	position:relative;
background-image:url(images/wholebg.jpg);
z-index:0;
/*z-index:-4; */

}

html{

overflow-x:hidden;
}
Help me out please, i am badly stuck