Strange white gap on the right when viewed on Iphone

Question

Hey guys
When viewed on computer, my 100% width appears to be working fine. But when viewed on iphone (possibly would do same on ipad and ipod but i don't own those) there is a strange white gap on the right.Maybe about 10 px worth.
I noticed in the "services" section, some of the writing was over hanging this white gap so i thought maybe i coded it wrongly and it was pushing the whole screen across. However i shrunk the width of that container now and its not overhanging, but the white gap is still there
I would have a guess that it is a freaky padding or margin setting somewhere in my coding...
site: http://www.jpmediaonline.co.uk
Any thoughts?

Answer 1

It definitely does matter. Like I mentioned earlier, when you have a fixed width of 1,000px for your content container, your 100% width setting for your outer container will be ignored - which means priority is given to 1,000px thereby rendering the whitespace to the right as your background is again a 128px square image. One solution I can think of is to make your background image 1x1px square that you can repeat. See if this makes any difference.'
My site, the autoscroller - I didn't use any plug-in as such. I simply used scrollTop from jQuery API and changed the settings to match . You can read about it here: http://api.jquery.com/scrollTop/
Here's my actual function that I'm calling when a menu button is pressed to scroll the div ID associated with it to scroll to Top of the screen. Again, this works for me, as my menu is fixed to the top, unlike your site where each site has a menu bar.
$('ul#menu li a').click(function(){
               var id = $(this).attr("href");
               $('html,body').animate({scrollTop: $("div"+id).offset().top},'slow');
     return false;
$('a#link').click(function(){
               var id = $(this).attr("href");
               $('html,body').animate({scrollTop: $("div"+id).offset().top},'slow');
     return false;