What in my HTML/CSS/javascript would be causing a strange gap on the right side of the screen?

Question

I currently have in development that's having a problem where there is a gap on the right side of the screen.

There is a horizontal scroll bar even when there normally wouldn't need to be, and when you scroll about 10-15px to the right there's a gap running down the right hand side of the site. I do HTML/CSS development all the time and I've never noticed that. Does anyone have any general knowledge about what can make that happen?

ANSWER, WITH CODE:

HTML included a div called "front_content" that was the lower half of my front page, filling the whole window from left to right. I had applied a CSS3 shadow to that div to make it shadow up over the header div above it, as if it was floating above.

.front_content {
    -moz-box-shadow: rgba(0,0,0,0.4) 0px -5px 10px;
}

It was pointed out to me that this was causing the page to be wider than it would normally be. By removing that CSS3 shadow, the gap disappeared.

Answer 1

It looks like your Media menu div is to wide for the screen.

Answer 2

Try adding overflow: hidden to your "main-content" div. You'll then probably want to make your "Apply Now" button a little more floaty.

Answer 3

This is the culprit (which also explains why Zack doesn't see it), the shadow is making the object wider than you expect:

.front_content {
-moz-box-shadow:0 -5px 10px rgba(0, 0, 0, 0.4);