Progate 中級道場 ヘッダー

Question

発生している問題・エラーメッセージ

現在、ProgateのHTML&CSS中級道場の「2.ヘッダーを作ろう」にて演習を行っているのですが下の画像のようにヘッダー内の位置調整が見本のように出来ません。どうしたらいいのか理由とともに教えていただきたいです。
以前にも似た質問がありましたがより詳細な回答が欲しいと思ったため、質問させていただきました。

該当のソースコード

<header>
    <div class="header-contents">
      <img class="header-left" src="https://prog-8.com/images/html/advanced/main_logo.png">
    </div>
    <div class="header-right">
      <a href="#" class="login">ログイン</a>
    </div>
  </header>

header{
  background-color:rgba(34,49,52,0.9);
  height:65px;
  position:fixed;
  top:0;
  z-index:10;
  width:100%;
}
.header-left{
  width:124px;
  float:left;
  margin:20px;
}
.header-right{
  background-color:rgba(255,255,255,0.3);
  padding:0 25px;
  float:right;
  line-height:65px;
  transition:all 0.5s;
  cursor:pointer;
}
.header-right:hover{
  background-color:rgba(255,255,255,0.5);
}
.header-right a{
  color:white;
}

ほかの疑問点

headerのCSSにて模範解答ではwidth:100%;にしていたので自分もまねているのですが、これがあるのとないのとではどう変わってくるのでしょうか？？無くても横いっぱいに表示されるような。。。

Comments

[m.ts10806]

ブラウザのデベロッパーツールの使い方は分かりますか？
https://ffsee.net/developer-tools/

[m.ts10806]

あと注意点として、聞いたところによると
Progateって模範解答と全く同じじゃないとOKにならないようなので
ここで得られる回答が模範解答通りになるとは限らないことはご承知おきください。
teratailはProgate専用のQAサービスではないので。

[m.ts10806]

＞以前にも似た質問がありましたが
提示してください。先に書いたようにProgate専用のサービスではないので
覚えてる回答者は皆無です。

[m.ts10806]

しかし提示のコードだけだと左側に余白ができるのでそもそもそこの調整が必要になりませんか。

Answer 1

多くの答えがあるかと思いますので、以下は一例です。

  <header>
    <div class="header-wrap">←追記
      <div class="header-contents">
        <img class="header-left" src="https://prog-8.com/images/html/advanced/main_logo.png">
      </div>
      <div class="header-right">
        <a href="#" class="login">ログイン</a>
      </div>
    </div>←追記
  </header>

header{
  background-color:rgba(34,49,52,0.9);
  height:65px;
  position:fixed;
  top:0;
  z-index:10;
  width:100%;
  left:0;←左に隙間があったので追記
}
.header-wrap{
  max-width: 1170px;←これで最大幅を1170pxにしています。常に1170px固定ならwidth:1170px;とご記入下さい。
  margin:0 auto;← .header-wrapを中央寄せしております。
}
以下変更なし

・width 100% について
私の環境 chromeでは100%が無いと横幅いっぱいになりませんでした。

質問者様の意図にあった答えになっているでしょうか？