SharePoint 2013 – Hide Horizontal Scrollbar on Front Page

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!