HTML/CSS ヘッダーナビゲーションが上手く反映しません

Question

質問失礼致します。

ヘッダーナビゲーションが上手く反映されず、困っております。
（独学で勉強しています。）

下記、画像の白い部分をピンクの左側にぴったりくっついたイメージでCSSを書きたいです。
(LOGOが左側詰め、ナビが右側詰めのイメージ)
margin-right:0を白い部分に書いても、反映されません。
margin-leftを入れると隙間はできますが、、、

どこを修正すべきなのか、お教えいただけると助かります。

 <header>
            <div id="header_flex">
                <h1>
                    <img src="./LOGO.png">            
                </h1>
                <nav>
                    <ul>
                        <li><a href="#">HOME</a></li>
                        <li><a href="#">ABOUT</a></li>
                        <li><a href="#">CONTACT</a></li>
                    </ul>
                </nav>
            
            </div>
            
        </header>

div#header_flex {
    width: 1000px;
    height: 80px;
    margin: 0 auto;
    line-height: 80px;
    display: flex;
    border: 5px solid red;

}

div#header_flex nav {
    margin-right: 0;
    border: 5px solid royalblue;
}

div#header_flex nav ul {
    display: flex;
    margin-right: 0;
    margin-left: 300px;
    border: 5px solid white;  
}

Answer 1

LOGOが左側詰め、ナビが右側詰めにしたいということでしたら
marginではなく、flexプロパティで子要素が両サイドに配置するように指定すれば良いかと。

div#header_flex {
    width: 1000px;
    height: 80px;
    margin: 0 auto;
    line-height: 80px;
    display: flex;
    justify-content: space-between;
    border: 5px solid red;
}

div#header_flex nav {
    border: 5px solid royalblue;
}

div#header_flex nav ul {
    display: flex;
}

marginを活用したいのであれば
margin-right: 0;をmargin-left: auto;に変更すれば可能です。
ulタグ内のmarginは不要

div#header_flex {
    width: 1000px;
    height: 80px;
    margin: 0 auto;
    line-height: 80px;
    display: flex;
    border: 5px solid red;
}

div#header_flex nav {
    margin-left: auto;
    border: 5px solid royalblue;
}

div#header_flex nav ul {
    display: flex;
    border: 5px solid white;  
}

参考にしていただけたらと思います。。

Comments

[missy]

margin-left: auto; は今まで使ったことがありませんでした！
ご丁寧に2通りの回答をありがとうございます！！

Answer 2

HOME ABOUT CONTACTのナブを右に配置したいと言う事ですか？
でしたら

div#header_flex nav ul {
    display: flex;
    float: right; 
    margin-right: 0;
    margin-left: 300px;
    border: 5px solid white;  
}

float: right;としてみてはどうでしょうか？

Comments

[missy]

ご回答ありがとうございます。
float: right; 追加してみましたが、何も変わりません。。

float: right; は、float指定の時のみしか使えないものと思っていたので、
flexと一緒に使える場合もあるのですね。