full-bleed flexbox header with nested nav -- absolute positioning bad practice? - html

Question

I am making making a full-bleed cover where I want 100% of the viewport on load to have an image, and then I want the header text to be centered.
I used flexbox to do this, the problem is, I also want the navbar in the full-bleed.
I get whitespace when I nest the nav in the header, but if I keep it in, I can't use flex-box to position my header
My last solution was to use absolute positioning and move it over a bit.. which is probably bad practice. I can't come up with a solution on my own other than these -- and I think absolute positioning is bad practice.
I made a codepen with a snippet. and below is my regular code.
I hope this is enough information - the idea is I want my nav inside the full bleed without it disrupting. The current codepen has absolute positioning but I would rather not use that. -- Did I miss something simple or is this a common problem?
I am not opposed to not using flexbox (I just started to use this) But I think there is a solution with flexbox that I am just not aware. Also I know my nav in generally is a little hacky
Here is my codepen and snippet
http://codepen.io/willcodes/pen/oLKZEL
HTML:
<nav>
<div class="nav-left">
<div class="logo">
<img src="assets/logo.png" alt="">
</div>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact
</ul>
</div>
<ul class="nav-right">
<li><i class="fa fa-globe" aria-hidden="true"></i>ENG</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</nav>
<header>
<div class="heading">
<div class="wrapper">
<h2>Trendy, Versatile, Minimal Solution to Style up Your Business</h2>
<h1>Designer. Photographer. Developer.</h1>
<button class="info">More Info</button>
</div>
</div>
</header>
<script src="https://use.fontawesome.com/902375b958.js"></script>
<script src="js/main.js"></script>
</body>
body, html {
margin: 0;
padding: 0;
width: 100%;
font-size: 10px;
}
h1, h2, h3, h4, ul {
margin: 0;
padding: 0;
}
.wrapper {
width: 70%;
margin: 0 auto;
max-width: 1280px;
}
.nav-left {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav {
position:absolute;
left:5%;
width: 90%;
margin: 0 auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
nav ul {
padding-top: 1%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav ul.nav-right {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav ul.nav-right i.fa-globe {
display: inline;
margin-right: 5px;
}
nav ul.nav-right li {
margin-top: 5px;
margin-right: 10px;
}
nav ul li {
margin-top: 5px;
margin-right: 2%;
list-style: none;
font-size: 1.5rem;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
color: white;
}
nav ul li a {
color: white;
text-decoration: none;
}
.logo {
margin-right: 5%;
padding-top: 1%;
}
.logo img {
max-width: 100%;
display: block;
}
header {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../Images/hero.jpg") no-repeat center, black;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.heading {
color: white;
text-align: center;
padding: 25px 50px;
margin: auto;
}
.heading h2 {
font-weight: 300;
font-family: "Damion", cursive;
font-size: 2rem;
}
.heading h1 {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 4rem;
letter-spacing: 3px;
}