nav выходит за пределы div

@charset "utf-8"; 
html, 
body, 
div, 
span, 
applet, 
object, 
iframe, 
h1, 
h2, 
h3, 
h4, 
h5, 
h6, 
p, 
blockquote, 
pre, 
a, 
abbr, 
acronym, 
address, 
big, 
cite, 
code, 
del, 
dfn, 
em, 
font, 
img, 
ins, 
kbd, 
q, 
s, 
samp, 
small, 
strike, 
strong, 
sub, 
sup, 
tt, 
var, 
b, 
u, 
i, 
center, 
dl, 
dt, 
dd, 
ol, 
ul, 
li, 
fieldset, 
form, 
label, 
legend, 
table, 
caption, 
tbody, 
tfoot, 
thead, 
tr, 
th, 
td { 
  background: none repeat scroll 0 0 transparent; 
  border: 0 none; 
  font-size: 100%; 
  outline: 0 none; 
  vertical-align: baseline; 
  margin: 0; 
  padding: 0; 
} 
 
table { 
  border-collapse: collapse; 
  border-spacing: 0; 
} 
 
address, 
article, 
aside, 
canvas, 
details, 
figcaption, 
figure, 
footer, 
header, 
hgroup, 
nav, 
menu, 
nav, 
section, 
summary { 
  display: block; 
} 
 
a, 
a:hover, 
button, 
button:hover, 
.anime, 
.small_btn, 
.btn:hover .small_btn { 
  -moz-transition: all 200ms linear; 
  -ms-transition: all 200ms linear; 
  -o-transition: all 200ms linear; 
  -webkit-transition: all 200ms linear; 
  transition: all 200ms linear; 
} 
 
button { 
  cursor: pointer; 
} 
 
* { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  box-sizing: border-box; 
} 
 
* { 
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  -ms-box-sizing: border-box; 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
 
 
/* Flex Framework */ 
 
.main_flex { 
  display: flex; 
  display: -webkit-flex; 
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
} 
 
.main_flex__nowrap { 
  display: flex; 
  display: -webkit-flex; 
  -webkit-flex-flow: row nowrap; 
  flex-flow: row nowrap; 
} 
 
.flex__auto { 
  flex: auto; 
  -webkit-flex: auto; 
  -ms-flex: auto; 
} 
 
.flex__jcontent_between { 
  justify-content: space-between; 
  -webkit-justify-content: space-between; 
} 
 
.flex__jcontent_start { 
  justify-content: flex-start; 
  -webkit-justify-content: flex-start; 
} 
 
.flex__jcontent_end { 
  justify-content: flex-end; 
  -webkit-justify-content: flex-end; 
} 
 
.flex__jcontent_center { 
  justify-content: center; 
  -webkit-justify-content: center; 
} 
 
.flex__jcontent_around { 
  justify-content: space-around; 
  -webkit-justify-content: space-around; 
} 
 
.flex__align-items_start { 
  align-items: flex-start; 
  -webkit-align-items: flex-start; 
} 
 
.flex__align-items_end { 
  align-items: flex-end; 
  -webkit-align-items: flex-end; 
} 
 
.flex__align-items_baseline { 
  align-items: baseline; 
  -webkit-align-items: baseline; 
} 
 
.flex__align-items_stretch { 
  align-items: stretch; 
  -webkit-align-items: stretch; 
} 
 
.flex__align-items_center { 
  align-items: center; 
  -webkit-align-items: center; 
} 
 
.flex__align-content_flex-start { 
  align-content: flex-start; 
  -webkit-align-content: flex-start; 
} 
 
.flex__align-content_flex-end { 
  align-content: flex-end; 
  -webkit-align-content: flex-end; 
} 
 
.flex__align-content_space-between { 
  align-content: space-between; 
  -webkit-align-content: space-between; 
} 
 
.flex__align-content_center { 
  align-content: center; 
  -webkit-align-content: center; 
} 
 
.flex__align-content_space-around { 
  align-content: space-around; 
  -webkit-align-content: space-around; 
} 
 
.flex__align-content_stretch { 
  align-content: stretch; 
  -webkit-align-content: stretch; 
} 
 
.flex__flex-grow_01 { 
  flex-grow: 1; 
  -webkit-flex-grow: 1; 
} 
 
.flex__flex-grow_02 { 
  flex-grow: 2; 
  -webkit-flex-grow: 2; 
} 
 
.flex__flex-grow_03 { 
  flex-grow: 3; 
  -webkit-flex-grow: 3; 
} 
 
.flex__flex-grow_04 { 
  flex-grow: 4; 
  -webkit-flex-grow: 4; 
} 
 
 
/* colors for the containers */ 
 
.dark { 
  background-color: #000; 
  color: #888888; 
} 
 
.spacegrey { 
  background-color: #f4f4f4; 
} 
 
.green { 
  background-color: #79c277; 
} 
 
html, 
body { 
  background-color: #fff; 
  font-family: Arial, Helvetica, sans-serif; 
  font-size: 0.928vmax; 
  line-height: 1.56vmax; 
  color: #cecbc8; 
  width: 100%; 
  height: 100%; 
} 
 
.wrap { 
  width: 70vw; 
  margin: 0 auto; 
  position: relative; 
  max-width: 1344px; 
} 
 
 
/* header settings for width and height. */ 
 
#top { 
  width: 100%; 
  height: 7.13vmax; 
} 
 
 
/* takes the value of a parent. */ 
 
#top .wrap { 
  height: inherit; 
} 
 
 
/* logo location. */ 
 
#logo { 
  margin-left: 1.92vmax; 
} 
 
 
/* logo settings and location. */ 
 
#logo img { 
  width: 2.86vmax; 
  height: 2.91vmax; 
  margin-right: 0.572vmax; 
} 
 
 
/* thunder style. */ 
 
#logo span { 
  font-size: 1.927vmax; 
  color: #fff; 
  text-transform: uppercase; 
} 
 
 
/* navigation style */ 
 
nav li { 
  list-style: none; 
  margin-left: 2.3vmax; 
} 
 
#menu a { 
  text-transform: uppercase; 
  color: #fff; 
  text-decoration: none; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>THUNDER</title> 
  <link rel="stylesheet" href="css/style.css" type="text/css"> 
  <link rel="stylesheet" href="css/media.css" type="text/css"> 
</head> 
 
<body> 
  <header class="dark"> 
    <div id="top"> 
      <div class="wrap main_flex__nowrap flex__jcontent_between flex__align-items_center"> 
 
        <div class="main_flex__nowrap flex__align-items_center"> 
          <div id="logo" class="main_flex__nowrap flex__align-items_center"> 
            <img src="img/logo.png" alt=""> 
            <span>thunder</span> 
          </div> 
        </div> 
 
        <div id="menu"> 
          <nav class="main_flex__nowrap flex__align-items_center 
                        flex__jcontent_end"> 
            <li><a href="#">home</a></li> 
            <li><a href="#">portfolio</a></li> 
            <li><a href="#">services</a></li> 
            <li><a href="#">staff</a></li> 
            <li><a href="#">pages</a></li> 
            <li><a href="#">features</a></li> 
            <li><a href="#">blog</a></li> 
            <li><a href="#">contact</a></li> 
          </nav> 
        </div> 
 
      </div> 
    </div> 
  </header> 
</body> 
 
</html>