Flexbox - Scrollbar moves centered content

Question

Flexbox with two columns. Each one has a centered content with a max-width of X. The second column has overflow-y set to scroll.
Obviously the scrollbar needs space and moves the centered content of the second column to the left.
Is there a way to have the contents still exactly below the other?

HTML:

<header>
    <nav>nav</nav>
</header>
<main>
    <section>section</section>
</main>

CSS:

html, body {
margin: 0;
padding: 0;
height: 100vh;
}
body {
display: flex;
flex-direction: column;
}
header {
flex: 0 0 auto;
}
main {
flex: 1 1 auto;
overflow-y: scroll;
}
nav {
width: 800px;
margin: 0 auto;
}
section {
width: 800px;
margin: 0 auto;
}

See: https://codepen.io/anon/pen/VpXvyN

Answer 1

A hacky fix would be to add the following line to the 'section' element CSS:

transform: translate(8px, 0);

It will move the 'section' element 8px to the right to account for the scrollbar. Tested working in Chrome and IE on Win 7 :/