サイトのタイトルを常に中心に配置したい

HTML,CSSの学習のために、あるミュージシャンのサイトを模写しています。
https://www.giladhekselman.com/biography

サイトのタイトル（＝ミュージシャンの名前）が常にページトップ中央に配置され、メニューバーがその下に配置されていますが、ブラウザ幅が1536px以上になると、そのメニューバーが２つに別れ、サイトタイトルの左右に配置されるという挙動が設定されています。

そこで、私はまず1536px以上をデフォルトとしてCSSを書き始め、下記のように「サイトタイトル」、「メニューバー左」、「メニューバー右」との順で書き、これらをflex-boxで横並びにし、「メニューバー左」を{order: -1;}とすることでこれを実現させようとしました。

しかし、問題はサイトタイトルが画面の中央に配置できないことです。メニューバーの左右の大きさが同等でないためにこの問題が生じているのだなとは思っているのですが、解決策がわからないままでいます。下記がコードです。

何か解決策があればご教示いただけますと幸いです。
よろしくお願い申し上げます。

（ご参考）私の書いたもののブラウザでの表示です。

HTML
1<body>
2  <header>
3    <nav>
4      <h1><a href="https://www.giladhekselman.com/biography">GILAD HEKSELMAN</a></h1>
5      <ul id="menu-left">
6        <li class="menu-left">CONCERTS</li>
7        <li class="menu-left">ABOUT</li>
8        <li class="menu-left">MEDIA</li>
9      </ul>
10      <ul>
11        <li class="menu">SHOP</li>
12        <li class="menu">CONNECT</li>
13        <li class="menu">SOCIAL</li>
14        <li class="menu">LISTEN</li>
15      </ul>
16    </nav>
17    <div id="top-img-container">
18      <img src="giladmark.jpg" alt="Gilad and Mark Turner">
19    </div>
20  </header>

CSSは、シンプルにこの問題に関連するものだけ提示させていただきます。

CSS
1header {
2  width: 100%;
3  --header-height: 560px;
4  height: var(--header-height);
5  text-align: center;
6}
7
8nav {
9  display: flex;
10  justify-content: center;
11  flex-direction: row;
12  align-items: center;
13  --nav-height: 50px;
14  height: var(--nav-height);
15  padding: 20px;
16}
17
18nav h1 {
19  margin: 0 20px;
20}
21
22nav h1 a {
23  margin: 0 15px;
24}
25
26ul {
27  display: flex;
28  justify-content: center;
29  padding: 0;
30}
31
32#menu-left {
33  order: -1;
34}
35
36li {
37  list-style: none;
38  margin: 0 22px;
39}
40

行動規範の内容に同意します

回答2件

ベストアンサー

全幅が要素幅以下ならgridで処理できます。

CSS
1nav {
2    display: grid;
3    grid-template-columns: 1fr max-content 1fr;
4    font-size: 0.5em;
5}
6h1 {
7    order: 2;
8}
9#menu-left {
10    order: 1;
11    display: flex;
12    justify-content: end;
13    padding: 0;
14    list-style: none;
15}
16ul + ul {
17    order: 3;
18    display: flex;
19    max-width: 100%;
20    justify-content: flex-start;
21    padding: 0;
22    list-style: none;
23}
24li {
25    padding: 1em;
26}
27```**動くサンプル：**[https://jsfiddle.net/jwem3cqt/](https://jsfiddle.net/jwem3cqt/)
28
29---
30
31【これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA】
32[https://ics.media/entry/15921/](https://ics.media/entry/15921/)
33
34【CSS Grid Layout を極める！（基礎編） - Qiita】
35[https://qiita.com/kura07/items/e633b35e33e43240d363](https://qiita.com/kura07/items/e633b35e33e43240d363)