Fix 'jumping scrollbar' issue using only CSS

fixJumpingScrollbar.css

/*
When centering a page with CSS like margin: 0 auto;, 
there's a small gotcha: the page will 'jump' a little 
on certain browsers when navigating between short and long pages. 
This is because the scrollbar gets hidden with short 
pages and is shown again with longer pages,
which makes the page move a little horizontally.

classic fix:

html {
    overflow-y: scroll;
}
*/
html {
  margin-left: calc(100vw - 100%);
  margin-right: 0;
}

/*
There's one small issue: when using responsive web design (which you should!), 
it gets quite obvious that the margin at the left is bigger than at the right when 
the page is made smaller. This won't be an issue on mobile because scrollbars aren't 
normally shown there, but it just looks ugly on a desktop browser when the browser is resized. 
This can be fixed by only enabling this feature on wider viewports:
*/
@media screen and (min-width: 960px) {
  html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
  }
}
/* 
Update
This has the side-effects that it will hide the right part of the page as the scrollbar hides that part, 
and it will disable horizontal scrolling. 
So I personally would not use it.
*/
html {
  width: 100vw;
  overflow-x: hidden;
}

fixJumpingScrollbar.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

/*
When centering a page with CSS like margin: 0 auto;, 
there's a small gotcha: the page will 'jump' a little 
on certain browsers when navigating between short and long pages. 
This is because the scrollbar gets hidden with short 
pages and is shown again with longer pages,
which makes the page move a little horizontally.

classic fix:

html {
    overflow-y: scroll;
}
*/

// New fix

html {
    margin-left: calc(100vw - 100%);
    margin-right: 0;
}

/*
There's one small issue: when using responsive web design (which you should!), 
it gets quite obvious that the margin at the left is bigger than at the right when 
the page is made smaller. This won't be an issue on mobile because scrollbars aren't 
normally shown there, but it just looks ugly on a desktop browser when the browser is resized. 
This can be fixed by only enabling this feature on wider viewports:
*/

@media screen and (min-width: 960px) {
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }
}

/* 
Update
This has the side-effects that it will hide the right part of the page as the scrollbar hides that part, 
and it will disable horizontal scrolling. 
So I personally would not use it.
*/

html {
    width:100vw;
    overflow-x:hidden;
}