Flexbox - Scroll bar moves centered content

Question

Flexbox with two columns. Each of them has centered content with a maximum width of X. The second column has overflow-y set to scroll.
Obviously, the scrollbar needs space and moves the centered contents of the second column to the left.
Is there a way to place content still exactly under another?

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 hacking fix would be to add the following line to the "section" CSS element:

transform: translate(8px, 0);

"section" 8px . Chrome IE Win 7:/