Scrollbar appears for no reason [closed]

Question

Alright so what my problem is is that on my website, there is a scrollbar appearing to let the user scroll like 1cm to the right.

I want to completely remote it and have the chatbox and logo actually centered in the page.

The same happens on mobile devices, the whole thing is SLIGHTLY scrollable which makes it really annoying.

Is there any way I can fix it?

Thanks a lot! Alex

Answer 1

From the looks of the Chrome inspector, you have added padding to the body which will push over any content. Because your width of the body is already 100%, adding 15px of margin on either side will create 30 extra pixels of width on top of your already 100% width, creating that horizontal scrollbar.

Take a look at this JSfiddle: http://jsfiddle.net/piedoom/T52MM/1/ I've simulated padding with a large border value. This is what your extra padding is doing to the body, it is pushing it over to the right and adding unneeded space, creating the horizontal scroll bar.

However, once you remove that padding, it will work correctly. http://jsfiddle.net/piedoom/T52MM/2/

You can remove just the side padding in css by typing body{padding-left: 0; padding-right: 0;} (It'll behave like this http://jsfiddle.net/piedoom/T52MM/3/ )

Answer 2

It is because you have in body CSS a width of 100%.

I disabled it in chrome and the horizontal scroll bar was gone.

width: 100%;

Try removing that and see how it goes.