Flexboxでナビゲーション

便宜上、複数のナビゲーションをnav要素で繰返し設定します
class名は「共通名」と「個別名」を付けて、設定を分けて指定します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Global Menu</title>
<style>
/* ------------------------------------
  reset
------------------------------------ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul, li {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------
  nav
------------------------------------ */
/* ---------- 共通設定 ---------- */
.gnav {
    margin-top: 50px;
}
.gnav > ul {  /* 子セレクタ指定 */
  display: flex;
  justify-content: center;
  background-color: #fffbb9;
}
  .gnav a {
    display: block;
    background-color: #b2edff;
  }

/* ---------- 個別設定 ---------- */

/* 文字の右空きを作る */
.gnav1 a {
  margin-right: 40px;
}
  /* 最後の右空きを削除する */
  .gnav1 li:last-child a {
    margin-right: 0;
  }
/* 文字の右左空きを作る */
.gnav2 a {
  margin: 0 20px;
}
  /* 文字の左空きを削除する */
  .gnav2 li:first-child a {
    margin-left: 0;
  }
  /* 文字の右空きを削除する */
  .gnav2 li:last-child a {
    margin-right: 0;
  }

/* 隣接セレクタで指定（liのclass名で指定） */
/* 最初に出てくる「.item-list」の隣から左空きを作る */
  .item-list + .item-list {
    margin-left: 40px;
  }

/* 文字の上下右左の余白を作る */
  .gnav4 a {
    padding: 10px 20px;
  }
</style>
</head>
<body>
<nav class="gnav gnav1">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Access</a></li>
    <li><a href="#">Recruit</a></li>
  </ul>
</nav>
<nav class="gnav gnav2">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Access</a></li>
    <li><a href="#">Recruit</a></li>
  </ul>
</nav>
<nav class="gnav gnav3">
  <ul>
    <li class="item-list"><a href="#">Home</a></li>
    <li class="item-list"><a href="#">Menu</a></li>
    <li class="item-list"><a href="#">Access</a></li>
    <li class="item-list"><a href="#">Recruit</a></li>
  </ul>
</nav>
<nav class="gnav gnav4">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Menu</a></li>
    <li><a href="#">Access</a></li>
    <li><a href="#">Recruit</a></li>
  </ul>
</nav>
</body>
</html>