Question

I’ve been developing this site for a while and suddenly today I noticed that the horizontal scrollbar on my browser was showing and was allowing the site to be scrolled an inch or two to the right.

The whole site is only 960px wide and my screen resolution is 1680px so clearly it should fit with plenty of space.

The site still displays exactly the same but the scrollbar is annoying me. I’ve tried adding borders to everything using the * selector in CSS but nothing seems to be protruding that extra inch. I’ve also used the Google Chrome console to highlight different sections of the site but none of them are causing the problem.

Every browser shows the same problem, do you have any explanations?

This is the site in question: http://compressmycode.com/

Answer 1

remove the position:relative in your #body-wrapper style around line 31 of your CSS and use margin-top:50px instead of top:50px

if you must keep the position:relative you can also just apply an overflow:hidden to your wrapper to remove whatever overflow may be there, but there are some inherent dangers in doing so.

EDIT

Upon further inspection, I’ve discovered that your .right div is the issue. For some reason, its being floated to the right is causing your problems.