Progate html＆css 中級　道場でのコードのバグ

なぜheaderのログインボタンの位置が下がってしまっているのかが分かりません。

html
1![イメージ説明](81032f97f7200790946cce1f5e8a0c89.png)
2
3 <header>
4   <div class="container">
5     <div class="header-lefft">
6       <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" />
7     </div>
8     <div class="header-right">
9       <a href="#" class="login">ログイン</a>
10     </div>
11   </div>
12  </header>
13  <div class="top-wrapper">
14     <div class="container">
15      <h1>LEARN TO CODE.</h1>
16      <h1>LEARN TO BE CREATIVE.</h1>
17      <p>Progateはオンラインプログラミング学習サービスです。</p>
18      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
19      <div class="btn-wrapper">
20        <a class="btn signup" href="#">新規登録はこちら</a>
21        <p>or</p>
22        <a class="btn facebook" href="#"><span class="fa fa-facebook"></span>Facebookで登録</a>
23        <a class="btn twitter" href="#"><span class="fa fa-twitter"></span>Twitterで登録</a>
24      </div>
25    </div>
26  </div>

css
1
2/* ここからCSSを書いていきましょう */
3.top-wrapper{
4  background-image:url(https://prog-8.com/images/html/advanced/top.png);
5  padding-top: 180px;
6  padding-bottom: 100px;
7  background-size:cover;
8  color:#fff;
9  text-align:center;
10}
11.container{
12  width: 1170px;
13  margin: 0 auto;
14}
15.top-wrapper h1{
16  font-size:45px;
17  letter-spacing:5px;
18  opacity:0.7;
19}
20.top-wrapper p{
21  opacity:0.7;
22    
23}
24.btn{
25  color:#fff;
26  margin:20px;
27  display:inline-block;
28  padding:8px 24px;
29  border-radius:4px;
30  opacity:0.8;
31}
32.btn:hover{
33  opacity:1;
34}
35.signup{
36  background: #239b76;
37  margin-top:15px;
38}
39.facebook{
40  background: #3b5998;
41  margin-right:10px;
42}
43.twitter{
44  background:#55acee;
45}
46.fa{
47  padding-right: 10px;
48}
49header{
50 width:100%;
51  background-color:rgba(34,49,52,0.9);
52  height:65px;
53  position:fixed;
54  z-index:10;
55  top:0px;
56}
57.logo{
58  width:124px;
59  padding: 20px;
60}
61.header-left{
62  float:left;
63}
64.header-right{
65  float:right;
66   background:rgba(255,255,255,0.3);
67   transition:all 0.5s;
68}
69.header-right a{
70  color:#fff;
71  display:block;
72  padding: 0px 25px;
73 
74  line-height:65px;
75}
76.header-right:hover{
77  background:rgba(255,255,255,0.5);
78}
79

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

回答1件

ベストアンサー

CSS では header-left クラスが宣言されていますが、実際に HTML で使用されているクラスは header-lefft クラスになってしまっているため、正常に装飾が行えていないことが原因です。以下のように付与するクラス名を修正することで、質問文のような問題は解決します (動作確認用リンク)。

HTML
1<header>
2  <div class="container">
3    <div class="header-left">
4      <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png" alt="" />
5    </div>
6    <div class="header-right">
7      <a href="#" class="login">ログイン</a>
8    </div>
9  </div>
10</header>
11<div class="top-wrapper">
12  <div class="container">
13    <h1>LEARN TO CODE.</h1>
14    <h1>LEARN TO BE CREATIVE.</h1>
15    <p>Progateはオンラインプログラミング学習サービスです。</p>
16    <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
17    <div class="btn-wrapper">
18      <a class="btn signup" href="#">新規登録はこちら</a>
19      <p>or</p>
20      <a class="btn facebook" href="#"><span class="fa fa-facebook"></span>Facebookで登録</a>
21      <a class="btn twitter" href="#"><span class="fa fa-twitter"></span>Twitterで登録</a>
22    </div>
23  </div>
24</div>