On our Microsoft SharePoint 2013 home page, we had a horizontal scrollbar appear.
What seemed to be happening was within the master CSS file was that the “s4-workspace” was of the “ms-core-overlay” that affects the whole size of the page was using this:
#s4-workspace {
width: auto !important;
height: auto !important;
overflow: auto !important;
}
As you can see the “overflow” was set to auto, this sets the scroll bars for the X and Y axis to auto. I want the X axis to be hidden, the page shouldn’t hang over but it does a bit on a 1024 x 768 screen, so to resolve this I added the following code to our main.css file that is used for any adjustments to the base CSS for the whole theme.
.ms-core-overlay {
overflow-y: auto !important;
overflow-x: hidden !important;
}
As the main.css is evaluated after the base CSS, this overrides what is set in the base CSS. And boom, the scroll bar is gone!