display:flexを使ったボタンの並べ方について

HTML、CSS練習をしています。

下記コードにて、
６個の<li>ボタンをdisplay:flex; justify-content: space-between;を使って等間隔に並べたいのですが、うまくいきません。

私の書いたコードで表示すると、ボタンが全体的に右に寄ってしまい、何かがおかしくなっています。

どこが間違っているのかご指摘頂きたいです。
よろしくお願いします。

<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="wrapper">
    <div id="header"></div>
    <nav id="global_navi">
      <ul>
        <li><a href="#">ボタン</a></li>
        <li><a href="#">ボタン</a></li>
        <li><a href="#">ボタン</a></li>
        <li><a href="#">ボタン</a></li>
        <li><a href="#">ボタン</a></li>
        <li><a href="#">ボタン</a></li>
      </ul>
    </nav>
    <div id="main_visual"></div>
    <div id="contents">
      <main id="primary"></main>
      <aside id="secondary"></aside>
    </div>
    <footer></footer>
  </div>
</body>
</html>

#wrapper{
  width: 890px;
  padding: 10px;
  background-color: #fff;
}
#header{
  background-color: black;
  width: 890px;
  height: 60px;
  margin-bottom: 10px;
}
#global_navi{
}
#global_navi ul{
  display: flex;
  justify-content: space-between;
}
#global_navi ul li{
  list-style-type: none;
  background-color: black;
  width: 140px;
  height: 40px;
  color: #fff;
  text-align: center;
  line-height: 40px;
}
#global_navi ul li a{
  display: block;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
}
#global_navi ul li a:hover{
  background-color: #666;
}
#main_visual{
  background-color: black;
  height: 300px;
  margin-bottom: 10px;
}
#contents{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  margin-bottom: 10px;
}
#secondary{
  width: 250px;
  height: 400px;
  background-color: black;
}
#primary{
  width: 630px;
  height: 400px;
  background-color: black;
}
footer{
  height: 60px;
  background-color: black;
}