画像の横にnav

現在WEB制作を勉強中です。WEBクリエイターボックスのmanaさんの本を読みながら勉強しています。

ちなみに、今回の質問はchapter4に関する内容です。

homeのページを作成中なのですが、トップページのロゴ画像の横にNAVタグで作成したメニューバーを配置したいです。
ですが、display:flex;を指定すると、ロゴの画像が表示されなくなってしまいます。

誰か、お力をお貸しください…

以下、cssです。
.page-header{
width: 210px;
margin-top: 14px;
}
.main-nav{
display: flex;
font-size: 1.25rem;
text-transform: uppercase;/全ての文字を大文字に変換 https://html-coding.co.jp/annex/dictionary/css/text-transform//
margin-top: 34px;
list-style: none;
}
.main-nav li{
margin-left: 36px;
}
.main-nav a{
color: #432;
}
.main-nav a:hover{
color: #0bd;
}
.page-header{
display: flex;
justify-content: space-between;
}

CSSの一番最後の箇所(.pageheader{display:flex;...)、ここを付け加えた時にうまく表示されなくなります。

上のロゴマークの右側に、LIで作った要素を持ってきたいんですが、

display:flex;を加えるとこのようにロゴの画像が消えてしまいます。。どなたか分かりますか？