float right で li の順番が逆になってしまう

nav内のリストを右寄せにしたかったので float :right で解決！

かと思いきや li が右から順番に表示されてしまうらしく、意図していたものと真逆の順番で表示されてしまった・・・

float: right で li が逆に

HTMLを逆に書いてもいいけど、なんか気持ち悪いので解決方法をググると

• 親の div を float: right にして、li は float: left
• flex box と order を使う（株式会社アテンド様のブログ）

の2つの方法を見つけました。（多分他にもいろいろあると思います。）

アテンド様のブログの方法は私にはレベルが高かったので

親の div を float: right にして、li は float: left

の方法で解決しました。

親をright 子をleft で想定通りの表示に

HTML

    <header>

        <h1>LALUNE</h1>

        <div class="navigation">

            <nav class="menu">

                <ul>

                    <li>HOME</li>

                    <li>ITEM</li>

                    <li>CONTACT</li>

                </ul>

            </nav>

        </div>

    </header>

CSS

.navigation {

  float: right;

}

.menu li {

  float: left;

  margin: 21px 10px;

  font-size: 2rem;

}

 これで正しいのかは分かりませんが、一旦OK！