Webサイトをデスクトップ版にする際、ロゴとナビゲーションを左右に振りたい。

実現したいこと

Webサイトをデスクトップ版にする際、ロゴとナビゲーションを左右に振りたいです。

発生している問題・分からないこと

Webデザインを学び始めて1ヶ月も経っていないド初心者です。Webサイトをデスクトップ版に変化させる際、headerにあるロゴとナビゲーションを左右に振りたいのですが二つとも左寄りに表示されてしまいます。HTMLやCSSもどの部分をこのサイトに載せていいか分かっておりません。不足があるかと思いますがご教授頂けますと幸いです。
左斜め上にロゴ、右斜め上にナビゲーションを持っていきたいのですが
左斜め上にロゴ、その下にナビゲーションが表示されてしまいます。

該当のソースコード

HTML

1 <header class="page-header"> 2 <h1 class="align-center"> 3 <a href="singlcoloum.html"><img class="logo" src="images/WCBCafe/images/logo.svg" alt="WCBカフェホーム"</a> 4 <nav> 5 <ul class="main-nav font-english"> 6 <li><a href="images/WCBCafe/news.html">News</a></li> 7 <li><a href="images/WCBCafe/menu.html">Menu</a></li> 8 <li><a href="images/WCBCafe/contact.html">Contact</a></li> 9 </ul> 10 </nav> 11 </h1> 12 </header>

CSS

1/* デスクトップ版 2 ----------------- */3 @media (min-width: 800px) {4 /* 見出し */5 .page-title{6 font-size: 5rem;7 }8 .heading-large{9 font-size: 4rem;10 }11 12 /* ヘッダー */13 .page-header {14 display: flex;15 justify-content: space-between;16 padding-top: 1.5rem;17 }

試したこと・調べたこと

上記の詳細・結果

参考書通りに打ち込んだりサイトを調べたりしましたが知識が足りず解決することが出来ませんでした。

補足

特になし