[html/css] ヘッダーを左右両端に配置したい

Question

実現したいこと

ヘッダーについて。
ロゴ部分（左）と画像と文字部分（右）を左右両端に配置したい

前提

ヘッダー部分を作成しているのですが、文字部分（右）は右端に移動するのですが、画像と共に右端に移動することができず、困っています。

該当のソースコード

<header class="header">
<div class="logo"><h2><a href="index.html">訪問介護ゆり</a></h2></div>
<div class="contact"><img src='img/woman.png'><p>今すぐ相談する</p></div>
</header>
　```ここに言語を入力
コード

*{
    padding: 0;
    margin:0;
    width: 100%;
    background-color:#fcfcfc;
}
.header{
    display: flex;
    width: 100%;
    height: 70px;
    justify-content: space-between;
   align-items: center;
}
.header img{
width: 50px;
height: 50px;

}
.contact{
    display: flex;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

*{
    padding: 0;
    margin:0;
    /*width: 100%;*/
    background-color:#fcfcfc;
}

Comments

[mmm2929]

解決できました。ありがどうございます！
ちなみに、なぜwidth:100%;を外したら左右に分けることができたのですか？

width:100%;がjustify-content: space-between;を邪魔していた事はわかったのですが、なぜjustify-content: space-between;が作用しなくなっていたのかを教えていただけると幸いです。

[kei344]

幅100%を目指して広がったら間に隙間ができないからです。デベロッパーツールで見てみましょう。