flex横並びにならない

こんな感じに表示されます。

初歩的な質問ですいません。
header部分を作ってh1画像と横にliタグで並べて下に画像を置きたいのですが
うまく配置できません。どこが悪いのか教えていただけませんか。
①+②　横並びにして
その下に③を配置したい。

- ここに言語を入力
HTML css```
コード



![イメージ説明](1ffdf7ebef657a6cb2eddc9bf83db774.png)

<!DOCTYPE html>
<html>
<head>
    <title>shimaenaga</title>
    <meta charset="utf-8">
    <meta name="description" content="shimaenaga">
    <meta name="keywords" content="レストラン,フレンチ,原宿">
    
<link rel="stylesheet" href="css/sanitize.css">
<link rel='stylesheet' href="css/style.css">
</head>

<body>
    <header class="page-header">
        <h1><a href="index.html"><img class="left_content" src="img/logo.png" alt="simaenaga"> </a></h1>
        <nav>
            <ul class="right_content">
                <li>cute</li>
                <li>cute</li>
            </ul>
        </nav>
        <img class="logo" src="img/header.jpg" alt="simaenaga">
    </header>
    <main>

        <h1>Our Ability</h1>

        <img class="contents" src="img/img1.png" alt="simaenaga">
        <p>Heal </p>
        <p>We are excellent.</p>

        <img class="contents" src="img/img2.png" alt="simaenaga">
        <p>Fly </p>
        <p>We are talented..</p>

        <img class="contents" src="img/img3.png" alt="simaenaga">
        <p>Sleep </p>
        <p>We are clever.</p>
    </main>

    <fotter>
        <h1>We are necessary for human life. </h1>
        <p>Because we are very cute. Please leave it to us if you need help.</p>

        <p>MORE</p>

        <img class="contents" src="img/img-right.jpg" alt="simaenaga">
        <p>copyright 2019 Shima-Enaga</p>

    </fotter>

</body></html>




@charset"UTF=8"

html {
    font-size: 100%;
}

img {
    max-width: 100%;
}

.wrapper {
    max-width: 980px;
}

.page-header {
    display: flex;
    justify-content: space-between;
}

.left_content {
    width: 256px;
    height: 50px;
    margin-top: 10px;
    margin-left: 150px;
    background: transparent url('img/logo.png') 0% 0% no-repeat padding-box;
    opacity: 1;
}

.right_content {
    display: flex;
    text-align: left;
    font: Bold 18px/31px YuGothic;
    letter-spacing: 0;
    color: #555555;
    opacity: 1;
}


![イメージ説明](69d813b7a8b06c8aad9fe72387f9083b.png)

Lhankor_Mhy

2019/08/15 00:28

ご提示のコードを当方で試したところ、「横並びにならない」という問題は再現しませんでした。 https://jsfiddle.net/Lhankor_Mhy/vkx8u5ne/ yzfr1さんの環境で↑のページは問題が再現しますか？もし再現するのであれば、環境の問題かと思います。もし再現しないのであれば、ご提示いただいていない部分に問題があるのかもしれません。

azuapricot

2019/08/15 00:28

何が言いたいのか文章では伝わってこないので、図示しましょう

yzfr1

2019/08/15 00:54

Lhankor_Mhyさんありがとうございます。上記のページにて動かしたところ、たしかに横並びになってます。僕が表示されてる画像のようには、なってないので環境のせいですね(^_^;)

yzfr1

2019/08/15 00:54

azuapricotさんありがとうございます。わかりやすいように図にしてみます(^_^;)

Lhankor_Mhy

2019/08/15 01:07 編集

> 上記のページにて動かしたところ、たしかに横並びになってます。僕が表示されてる画像のようには、なってないので環境のせいですね(^_^;) 違うと思います。環境の問題だと判断できるのは、提示したサンプルで問題が再現した時です。サンプルでは問題が再現しなかったのですから、環境の問題ではなく、ご質問者のコードとサンプルコードとの差異に問題があると思われます。つまり、ご提示いただいていない部分に問題がある可能性が高いです。

yzfr1

2019/08/15 01:27

ありがとうございます。コードを全部書きました。もしよければ回答お願いいたします。

Lhankor_Mhy

2019/08/15 01:58

質問編集拝読。ご提示のコードを当方で試してみましたが、問題は再現しませんでした。 style.css は、これで全部でしょうか？なお、ご提示いただけなかった sanitize.css は、こちら( https://csstools.github.io/sanitize.css/ )を使用しました。

yzfr1

2019/08/15 02:14

Lhankor_Mhy様ありがとうございます。 HTML　style.css のコードは上記ので全てになります。 sanitize.cssは何も編集しておりません。

Lhankor_Mhy

2019/08/15 02:20

> sanitize.cssは何も編集しておりません。これは、https://csstools.github.io/sanitize.css/ で合っていた、という意味ですか？

yzfr1

2019/08/15 02:53

言葉が足りずすいません。それであってます。

Lhankor_Mhy

2019/08/15 03:40

では、やはり問題が再現しないですね。しっくりきませんが、環境の問題なのでしょうか……？ひとつ気になるのは、当方で試した場合、list-style-type: none; が効いているようなのですが、ご提示のスクリーンショットでは効いていないように見えることです。sanitize.css が壊れていたり、別のディレクトリにあったりしませんか？

yzfr1

2019/08/15 04:32

sanitize.cssは、新しくDLして同じフォルダに置いてます。直接index.htmlを開いた画像とBracketsのライブプレビューで表示された画像とjsfiddleで動かした画像を③枚用意してみました。

Lhankor_Mhy

2019/08/15 05:18

> ①+②　横並びにしてその下に③を配置したい。ああ、すみません。これを見逃していました。このHTML構造だと難しいと思いますよ。h1 と nav を何かの要素でラップするのが一番簡単かと思います。

yzfr1

2019/08/15 05:39

ありがとうございます。