fixed position header with flexbox

I am playing with the code from flexbox 2 and what I'm trying to do is make the nav run the full width of the screen and have a fixed position at the top so that when the content is scrolled it scrolls under the nav bar which stays stuck to the top. When I do this, however, it seems to mess with the alignment of the flex items and just generally screws up the positioning of the header. Is there a good way to accomplish this using flexbox?

Here is the CSS for the flexbox styles (same as the lesson CSS):

.nav, .main { display: flex; }

.nav { flex-direction: row; justify-content: space-between; flex-wrap: wrap; }

.nav li { flex-grow: 1; }

.col { flex: 1; }

.col-c { flex: 2; order: -1; }

@media screen and (max-width: 999px) { .main{ flex-direction: column; } }

CSS for the rest of the styles:

} body { margin: 40px 0; background: #203542; color: #222; font-size: 1.1em; font-family: sans-serif; line-height: 1.5; } h2 { margin: 0; } p { margin: 1.3em 0; } .nav { list-style-type: none; margin: auto; padding: 20px; position: fixed; top: 0; left: 0; width: 100%; border: 2px solid #1d2e3a; background: #3e5b70; } .main { margin: 25px auto; padding: 20px; width: 80%; border: 2px solid #1d2e3a; border-radius: 10px; background: #3e5b70; } li { margin: 10px; border-radius: 10px; background: #70968C; color: #FFF; } .nav a { display: block; padding: 15px; color: inherit; text-decoration: none; } .col { margin: 10px; padding: 25px; border: 2px solid rgba(45,74,95,.9); border-radius: inherit; background: rgba(255,255,255,.8); }