Content on pages move horizontally depending on if a scrollbar is on screen or not

[edwardhorsford]

Content in the template is centred on the page. If the page has a scrollbar, this will be slightly to the left. If the page doesn't have a scrollbar, the content is slightly to the right.

If a user moves between tabs / sections of the site, this makes the GOV.UK logo and other things appear to jump about. Ideally when using navigation links, everything would stay in position.

Example:

On my personal site I've gotten around this by using margin-left: calc(100vw - 100%); on body - which adds a left margin equal to the width of a scrollbar.

@NickColley tells me that @colinrotherham also raised this recently and suggested this:

@media only screen {
  .container {
    overflow-y: scroll;
  }
}

[NickColley]

In GOV.UK Template (which we aim to replace) it has something to account for this:

• https://github.com/alphagov/govuk_template/blob/master/source/assets/stylesheets/_basic.scss#L60
• https://github.com/alphagov/govuk_template/blob/f2c10fae7ec7e371fd11c409cd71a399e3342e7f/source/assets/stylesheets/_basic.scss#L110-L112

[36degrees]

Fixed in #1230