С помощью Flex строки меню вместе. Что не так?

[FotGOD]

Здравствуйте. Верстаю макет, но чтото не так. Подобные верстал раньше, все было хорошо, даже сверяю, все чуть ли не под копирку написал. Но в Этом коде почему-то строки в меню слиплись и не могу их раскинуть. на рисунке как должно быть, и как выходит. Что не так делаю?

 Html:

<div class="container">
    <header class="header">
      <div class="header-item">
        <a href="#"><h1 class="logo">Bouncy</h1></a>

        <nav class="navbar">
          <ul class="menu">
            <li><a href="#">Hello</a> </li>
            <li><a href="#">About</a> </li>
            <li><a href="#">Services</a> </li>
            <li><a href="#">Portfolio</a> </li>
            <li><a href="#">Team</a> </li>
            <li><a href="#">Blog</a> </li>
            <li><a href="#">Contact</a> </li>
          </ul>
        </nav>
      </div>


    </header>
  </div>

 Css:

.header {
  width: 1366px;
  height: 737px;
  background: url(../i/header.jpg) no-repeat;
}
.header a {
  text-decoration: none;
}

.container {
  width: 1366px;
  margin: auto;
}

.header-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.logo {
  text-transform: uppercase;
  color: #ffffff;
}

.navbar {
  margin-top: 16px;
}

.menu {
  display: flex;
  justify-content: flex-end;
  list-style: none;
}
.menu a {
  color: #ffffff;
}

 

[FotGOD]

Если вдруг комуто нужно будет, просто нужно было поставить margin в li.

.menu{  
    display: flex;
    li{
        margin: 0 10px;
    }
    list-style: none;
    a{
    color: #{$white};
}
}