Scrollbar appears for no reason

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

Answers


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/ )


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.


Need Your Help

Can I use loops in repeater? Is it recommended?

c# asp.net loops repeater

My datasource has an Rating dataItem contains an integer from 0 to 5. I'd like to print stars accordignly.

Awk command not working in csh

scripting awk csh

Please let me know what is wrong with below code: