Until my friend showed me these screenshots:
1st) mac desktop with safari browser zoomed in - there is an horizontal scrollbar as you can see, it shouldn’t happend.
2nd) iOS with safari browser - don’t know excactly how to explain it, that spacing to the right shouldn’t appear.
There are about 3 reasons why there is a gap and are contained in your header and footer elements. You have fixed with elements in your header of 346px and that means the page cannot scale down to fit on a 320px viewport so teh viepwort gets stretched and other elements remain their original size hence the gap. Always allow all elements to scale under 320px at least.
In your footer your fb-like is also set to 335px and will trigger the scrollbar and stretch the viewport also.
In your header you should use a real image for the logo and sets its width to 100% and its height to auto. Then just set the anchor to a max-width that matches the logos original width and in that way the logo will scale smaller once its max-width is achieved and will not cause a scrollbar.
Ok, I don’t have a way to test this right now, but I have changed the following stuff:
Did what you said with the site title.
Reduced the like button width to 315px (I dont think there’s a way to make it fluid…)
Now a question, when I had the title as a background-image I could add text inside the h1 tag to for SEO purposes, it had text-indent -9999px, it doesnt work when I add a real image, what do you think? is it needed? and if yes how do you suggest adding it?
Some screen readers may not read text that is indented and text-indent used like that is bad for accessibility because without css or without images the viewer gets absolutely nothing. If you must use image replacement then use the Gilder Levin method (google it).
However to answer your question the image is important content (otherwise why would you supply text for it) then you will get better seo from having the alt attribute of the image explaining what the image is. If an image is content it should be in the html and a company name or logo will have the name in the alt attribute which will convey what the image is to search engines and assisted devices and is the most accessible method.
It is also the easiest way to scale an image to fit as images always keep their aspect ration when one dimension is set to auto.