I have a pesky horizontal scrollbar on the website that I’m developing, and I can’t seem to find the cause of it. I’ve done my homework and searched for a solution, but the only one I was able to find was the common method of setting the “overflow-x” property to “hidden.” This is unacceptable for me as this only hides the problem, not fixes it. Somehow, something is pushing the width of my site past the viewing window, even though I have attempted to set the maximum-width to 100% using CSS (I even tried applying it globally). Here is a link to my site so that you can get a better picture:
Site Link
Notice how most of the site displays normally as if there should not be a horizontal scrollbar. However, the pictures and “column” DIV’s, center using the total width.
I’m almost to the point where I need to scrap everything and start over. Any help would be greatly appreciated.
First thing that comes to mind is that your .row class has a left position of 100% and a max-width of 100%. That is definitely part of the problem.
After further investigation, you are using left and right position properties incorrectly. Even your image thumbnails are part of the overall problem.
You’re right that setting overflow-x: hidden will not fix your problem.
After going through your stylesheet and removing all left and right properties where you’re setting left: 100% or right: 100%, it fixes the problem. (debugged in firebug for firefox)