Vertical centering issue with flexbox and CSS3 width/height declarations - html

Question

I'm not sure what I'm doing wrong but I'm trying to vertically center a nav element and stick it to the right of the screen however there is something pushing it down just a bit off center.
The red is the flex container, the green is the header and the grey box is the right aligned and vertically centered box I want to be ACTUALLY vertically centered and not 'off-center'.
I can't figure out what is making it jump down.
I've created a JSFIDDLE so you can see what I'm trying to achieve. (Essentially it's a fixed flex container that sits over a scrolling page.
<div class="navWrap"><!-- Place less important HTML after main content (My brain hurts!)-->
<header>
<nav>
</nav>
</header>
<nav class="pagesNav next">
<span class="arrow"></span>
<span class="arrow"></span>
</nav>
</div>
CSS:
.navWrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: red;
}
header {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
width: 100%;
height: 70px;
background: green;
}
nav:not(.pagesNav) {
}
.pagesNav {
margin-left: auto;
width: 80px;
height: 155px;
background: #414141;
}

Answer 1

You have your header in the wrong place, try this
<div class="pageWrap"><!-- Primary content first for SEO purposes. Use CSS to rearrange secondary elements -->
<header>
<nav>
</nav>
</header>
<main role="main">
<section></section>
<section></section>
<section></section>
<section></section>
</main>
<footer>
</footer>
</div>
<div class="navWrap"><!-- Place less important HTML after main content (My brain hurts!)-->
<nav class="pagesNav next">
<span class="arrow"></span>
<span class="arrow"></span>
</nav>
</div>
css
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
html, body {
height: 100%;
}
body {
}
/* Temp styles */
.pageWrap {
}
main {
max-width: 1920px;
height: 100%;
margin: 0 auto;
}
section {
height: 100vh;
width: 100%;
background: white;
}
section:first-child {
height: 95vh;
}
section:nth-child(even) {
background: yellow;
}
footer {
height: 300px;
background: red;
}
/* Less important info */
header{
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
}
.navWrap {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: fixed;
top: 0;
width: 100%;
height: 100vh;
}
header {
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
width: 100%;
height: 70px;
background: green;
}
nav:not(.pagesNav) {
}
.pagesNav {
margin-left: auto;
width: 80px;
height: 155px;
background: #414141;
}
here is the fiddle https://jsfiddle.net/L4u9t78m/2/