Progate 中級　①ロゴとログインボタン位置が見本とあわない　②ロゴの左側、ログインボタンの右側の余白の確保

前提・実現したいこと

Progate 中級　道場　ヘッダーを作ろう　に関する質問。
前回は正答と同じfloatで作成していたこともあってか、解答と照らし合わせやすく勝手に微調整も加えたせいか、うまく合致できました。
今回は、floatの部分を前回の質問の際に教えて頂いた「flexbox」を用いてコーディングに挑戦しましたが、どうしてもロゴとボタン位置が見本と合わないようです。
つきましては、以下について質問させていただきます。

①float と flexbox　を使用した場合では、その部分の指示を置き換えるだけでなく、ほかの部分にもずれが生じるものなのなか？そうであるなら、どこを直したらよいのか　
（例えばfloatではあわせて高さの指示も必要になるが、flexboxでは不要など）

②前回は恐らく勝手に見よう見まねで勝手に調整していたが、正答にはそのような指示は見当たらない様子。にもかかわらず、私と正答との仕上がりで余白に差が出るのはなぜか。
※Progateの説明にも、見た目が合っているかどうかが正解の基準になるようなので、勝手にいじればどうにかはなるとおもいますが、正答にはその箇所の記入がないにもかかわらず相違点がでることが気になります。仕様書も写真で添付いたします。

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

赤く囲まれたところを見直してみよう

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>Progate</title>
6  <link rel="stylesheet" href="stylesheet.css">
7  <!-- ここでFont Awesomeを読み込んでください -->
8  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9</head>
10<body>
11  <!-- ここにコードを書いていきましょう -->
12  <!--ここからheader-->
13  <header>
14    <div class="header-top">
15    <div class="header-left">
16      <img src="https://prog-8.com/images/html/advanced/main_logo.png" class="logo">
17      </div>
18      <div class="header-right">
19      <a href="#" class="login"><span>ログイン</span></a>
20    </div>
21    </div>
22  </header>
23  <!--ここまでheader-->
24  <!--ここからtop-->
25  <div class="top-wrapper">
26    <div class="container">
27      <h1>LEAN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
28      <p>Progateはオンラインプログラミング学習サービスです。<br>
29初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
30      <a href="#" class="btn signup">新規登録はこちら</a>
31      <p>or</p>
32      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
33      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
34    </div>
35  </div>
36  <!--ここまでtop-->
37  
38</body>
39</html>

該当のソースコード

CSS
1/* CSSのリセット（消さないでください） */
2html, body,
3ul, ol, li,
4h1, h2, h3, h4, h5, h6, p, div {
5  margin: 0;
6  padding: 0;
7}
8
9body {
10  font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
11}
12
13li {
14  list-style: none;
15}
16
17a {
18  text-decoration: none;
19}
20
21/* ここからCSSを書いていきましょう */
22/*ここからtop-wrapper*/
23.top-wrapper {
24  background-image:url(https://prog-8.com/images/html/advanced/top.png);
25  background-size:cover;
26  color:white;
27  text-align:center;
28  padding: 180px 0 100px 0;
29  
30  
31}
32
33.container {
34  width:1170px;
35 margin: 0 auto;
36 
37}
38
39
40.top-wrapper h1 {
41  font-size:45px;
42  letter-spacing:5px;
43  opacity:0.7;
44}
45
46.top-wrapper p {
47  opacity:0.7;
48  margin-bottom: 15px;
49}
50
51.btn {
52  color:white;
53  opacity:0.8;
54  padding:8px 24px;
55  display:inline-block;
56  opacity:0.8;
57  border-radius: 4px;
58}
59
60.signup {
61  background-color: #239b76;
62  margin-top:15px;
63  margin-bottom:15px;
64  
65}
66
67.facebook {
68  background-color:#3b5998;
69  margin-right:10px;
70}
71
72.twitter {
73  background-color: #55acee;
74}
75
76.btn:hover {
77  opacity:1;
78}
79
80.fa {
81  margin-right: 5px;
82}
83
84/*ここからheader*/
85header {
86  width:100%;
87  background-color:rgba(34, 49, 52, 0.9);
88  position:fixed;
89top:0;
90  z-index: 10;
91  height:65px;
92}
93
94
95.header-top {
96  display:flex;
97  justify-content:space-between;
98}
99.header-left {
100  display:flex;
101  align-items:center;
102/*ちなみに　margin-left:20px */
103
104
105}
106
107.logo {
108  width:124px;
109  margin:20px;
110  
111}
112
113.header-right {
114transition:all 0.5s;
115display:flex;
116align-items:center;
117background-color:rgba(255, 255, 255, 0.3);
118transition: all 0.5s;
119/*ちなみに　margin-right:50px*/
120/*この二つを加えると見た目も大体同じになり、正解にもなります*/
121}
122
123.header-right a {
124  color:white;
125  line-height:65px;
126  padding: 0 25px;
127  display:block;
128}
129
130.header-right:hover {
131  background-color:rgba(255, 255, 255, 0.5);
132}

試したこと

正答と照らし合わせて確認しました。

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

Windous

参考写真

ご回答を受けて追記

ご回答を受けて、Progateでそのようにコードを修正してみました(上記の該当コードは以前のままです)
結果として、正解にはなりましたが、心なしかすこしだけ見本と余白スペースが違うように感じますが、いかがでしょうか？????

完成画像

参考写真

おかげさまで、無事完成いたしました。的確なアドバイスを頂き、誠にありがとうございました。

行動規範の内容に同意します

回答1件

ベストアンサー

仕様書を見ると、.header-topも1170pxの横幅にならなければいけないのでは？
背景色は画面端まであるのでheaderは100%でも良さそうですが、見本のロゴと「ログイン」は画面端に位置していないようです。
progateで採点したわけではないのでどうなるかわかりませんが、以下のような記述に直してみてください。

css
1.header-top {
2  display: flex;
3  justify-content: space-between;
4/* 追記ここから */
5  width: 1170px;
6  margin: 0 auto;
7/* 追記ここまで */
8}

ガイドを追加して位置を確認してみた

投稿2020/12/17 05:51

編集2020/12/17 06:25

dit.

総合スコア3235

mitrasi

2020/12/17 06:10

ご回答ありがとうございます！正解にはなりましたが、余白の間隔が違うように見えました???? 画像を添付しておりますので、詳細は質問欄の追記をお読みいただければ幸いです。

mitrasi

2020/12/17 06:17

本当に気のせいかもしれないレベルなので、主観的な間違いでしたら大変申し訳ないです????

dit.

2020/12/17 06:24

Illustratorでガイドを引いたところ確かにずれて見えますね（回答編集して画像添付します）。これは.header-leftのmargin-left:20px;を消していないからだと思うのですがいかがでしょうか。ログイン側はあっていますし。

mitrasi

2020/12/17 06:31

とてもわかりやすい画像ありがとうございます♪ 上記該当コードのコメントアウト部分はProgateでもコードにも含めておりませんので、その部分ではなさそうです…しかし、確かに右はあっているので、left側の指示が影響している可能性が高そうですね

dit.

2020/12/17 06:43

先ほど質問者さんが提示された画像だとmargin-left:20px;はコメントアウトされていないですが、もう一度ご確認いただけますか？

mitrasi

2020/12/17 06:47

申し訳ありません。おっしゃる通りでございました???? 丁寧にご教授くださり本当にありがとうございました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！