If you want to implement a fixed with centered design in SharePoint 2013 you might have some trouble with the alignments, because of the scrolling area. Let's see how to fix it.
This design has a fixed header area, the page will only scroll bellow the header. But when the scroll bar is visible the header and the content area dont align. Here's a better look.
The scroll bar is pushing the content out of alignment.
To fix it we need to give the body a little extra space to account for the scrollbar. And we need to have the scrollbar always visible. Like so:
/* deal with extra scrollbar width in #s4-workspace */
body {
margin-right: 17px; /* More info here: http://www.textfixer.com/tutorials/browser-scrollbar-width.php */
}
body #s4-workspace {
overflow-y: scroll; /* always show the scrollbar */
}
Now everything aligns correctly.
