Progate 中級　①「ログイン」の位置が思った位置に配置されない　②「Progate」ロゴの大きさが思ったように調整できていない

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
Progate:中級:道場
①「ログイン」の位置が見本のようにうまく配置できない
②「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 
13  <!--ここからtop-->
14   <!--ここからheader-->
15  <header>
16    <div class="container">
17      <div class="header-left">
18    <img src="https://prog-8.com/images/html/advanced/main_logo.png" calss="logo">
19    </div>
20    <div class="header-right">
21 <a href="#" class="login">ログイン</a>
22 </div></div>
23  </header>
24  <!--ここまでheader-->
25  
26  <div class="top-wrapper">
27    <div class="container">
28      <h1>LEARN TO CODE.<br>LEARN TO BE CREATIVE.</h1>
29      <p>Progateはオンラインプログラミング学習サービスです。<br>
30初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
31      <a href="#" class="btn signup">新規登録はこちら</a>
32      <p>or</p>
33      <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a>
34      <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a>
35    </div>
36  </div>
37  <!--ここまでtop-->
38  
39</body>
40</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.container {
33  width:1170px;
34 margin: 0 auto;
35 
36}
37
38
39.top-wrapper h1 {
40  font-size:45px;
41  letter-spacing:5px;
42  opacity:0.7;
43}
44
45.top-wrapper p {
46  opacity:0.7;
47  margin-bottom: 15px;
48}
49
50.btn {
51  color:white;
52  opacity:0.8;
53  padding:8px 24px;
54  display:inline-block;
55  opacity:0.8;
56  border-radius: 4px;
57}
58
59.signup {
60  background-color: #239b76;
61  margin:15px 0 15px 0;
62  
63}
64
65.facebook {
66  background-color:#3b5998;
67  margin-right:10px;
68}
69
70.twitter {
71  background-color: #55acee;
72}
73
74.btn:hover {
75  opacity:1;
76}
77
78.fa {
79  margin-right: 5px;
80}
81
82/*ここからheader*/
83header {
84  height:65px;
85  background-color:rgba(34,49,52,0.9);
86  width:100%;
87  position:fixed;
88  top: 0;
89  z-index: 10;
90}
91
92.logo {
93  width:124px;
94  margin-top:20px;
95}
96
97.header-right {
98  float:right;
99  background-color:rgba(225,225,225,0.3);
100  padding:25px;
101  transition:all 0.5s;
102}
103
104
105.header--left {
106  float:left;
107}
108.header-right:hover{
109  background-color:rgba(225,225,225,0.5);
110}
111.header-right a {
112  color:white;
113  line-height:65px;
114  padding: 0 25px;
115  display:block;
116}

試したこと

一通り自分がわかる範囲まで解いた後、解答を見ながら解答にあわせて修正していくという流れでやっています。
だから、基本的には現在解答に限りなく近いと思いますが、どこか間違えているのか把握できていない現状です。

##参考写真（上部が私の作成、下部が見本です）

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

Windows

一応、なるべく自力でできるようリセットしてもう一回やるつもりですが、リセットすると今回のものを消さざるを得ないため、次リセットしてやり直した時と違いを見比べ、また上手くいかなかった場合のために、あえてこの段階で質問として投稿させて頂きます。
回答を見に来る前にうまくできたら自己解決にしますが、自己解決になっていなければ純粋に質問としてご回答を待ち望んでいる状況になりますので、どうぞお力添えをよろしくお願いいたします。

hatena19

2020/12/15 11:16

質問文が重複してます。重複部分は削除してください。あと、見本の画像と現状の画像を提示してください。見本と違うといわれても、見本がどうなっているか、分かりません。

mitrasi

2020/12/15 23:36

おはようございます。遅くなって申し訳ございません。修正させて頂きました

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

回答1件

ベストアンサー

まず、HTMLの下記のタイポcalss="logo"をclass="logo"に修正。

html
1    <div class="header-left">
2      <img src="https://prog-8.com/images/html/advanced/main_logo.png" calss="logo">
3    </div>

CSSは現状のコードから最低限の変更でするなら、

css
1/*ここからheader*/
2header {
3  height:65px;
4  background-color:rgba(34,49,52,0.9);
5  width:100%;
6  position:fixed;
7  top: 0;
8  z-index: 10;
9}
10
11.logo {
12  width:124px;
13  margin-top:20px;
14}
15
16.header-right {
17  float:right;
18  background-color:rgba(225,225,225,0.3);
19/*  padding:25px; 削除 */
20  transition:all 0.5s;
21}
22
23/* .header--left { このタイポを下記に修正  */
24.header-left {
25  float:left;
26}
27/* ここまで */

横並びをfloatで実装してますが、この方法は過去のものです。現在ならFlexboxでするのが主流ですす。シンプルに実装でき、かつ自由度が高いので。

FlexBoxでの実装例

css
1/*ここからheader*/
2header {
3  height:65px;
4  background-color:rgba(34,49,52,0.9);
5  width:100%;
6  position:fixed;
7  top: 0;
8  z-index: 10;
9}
10header > .container {
11  display: flex;
12  justify-content: space-between;
13  align-items: center;
14}
15.header-left {
16  width:124px;
17  display: flex;
18  align-items: center;  
19}
20.logo {
21  width: 100%;}
22
23.header-right {
24  background-color:rgba(225,225,225,0.3);
25  transition:all 0.5s;
26}
27/* ここまで */```