HTML & CSS フッターについて

Progate道場編中級者問題について
フッターの部分なんですが、間違っているところがどこかがわかりません。
以下問題と自分で作ったHTML,CSSのコードです。
よろしくお願いします。

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    <div class="header">
14    <img src="https://prog-8.com/images/html/advanced/main_logo.png">
15    <a href="#">ログイン</a>
16    </div>
17    
18    
19  </header>
20  <div class="top">
21    <div class="top-font">
22      <h1>LEARN TO CODE.</h1>
23      <h1>LEARN TO BE CREATIVE.</h1>
24      <p>Progateはオンラインプログラミング学習サービスです。</p>
25      <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
26    </div>
27    <div class="register">
28      <a class="new" href="#">新規登録はこちら</a>
29      
30      <p>or</p>
31      
32      <a class="facebook" href="#">
33        <span class="fa fa-facebook"></span>
34        Facebookで登録</a>
35      
36      <a class="twitter" href="#">
37        <span class="fa fa-twitter"></span>Twitterで登録</a> 
38    </div>
39  </div>
40  <div class="lesson-wrapper">
41    <h2>Learn Where to Get Started!</h2>
42    <div class="lessons">
43      <div class="lesson-icon">
44        <img src="https://prog-8.com/images/html/advanced/html.png">
45        <p>HTML & CSS</p>
46        <div class="text-contents">
47        ウェブページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。  
48        </div>
49      </div>  
50      <div class="lesson-icon">
51        <img src="https://prog-8.com/images/html/advanced/jQuery.png">
52        <p>jQuery</p>
53        <div class="text-contents">
54        素敵な動きを手軽に実装できるJavaScriptライブラリです。 アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。  
55        </div>  
56      </div>
57      <div class="lesson-icon">
58        <img src="https://prog-8.com/images/html/advanced/ruby.png">
59        <p>Ruby</p>
60        <div class="text-contents">
61        オープンソースの動的なプログラミング言語で、 シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。  
62        </div>  
63      </div>
64      <div class="lesson-icon">
65        <img src="https://prog-8.com/images/html/advanced/php.png">
66        <p>PHP</p>
67        <div class="text-contents">
68        HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。  
69        </div>  
70      </div>
71    </div>
72  </div>
73  <div class="message-wrapper">
74    <div class="message">
75      <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2>
76      <h3>Let's learn to code,learn to be creative!</h3>
77    </div>
78    <div class="button">
79      <a href="#">さっそく開発する</a>
80    </div>
81  </div>
82  <footer>
83    <div class=footer-parts>  
84      <img src="https://prog-8.com/images/html/advanced/footer_logo.png">
85      <p>Learn to Code, Learn to be Creative.</p>
86    </div>
87
88  </footer>
89</body>
90</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を書いていきましょう */
22header{
23  background-color:rgba(34,49,52,0.9);
24  width:1170px;
25  height:65px;
26  padding:0 50px;
27  position:fixed;
28  top:0;
29  
30}
31.header img{
32  width:124px;
33  padding-top:20px;
34  float:left;
35}
36.header a{
37background-color:rgba(255,255,255,0.3);
38color:white;
39opacity:1;
40 padding-right:25px;
41 padding-left:25px;
42 line-height:65px;
43  float:right;
44  display:block;
45  transition:all 0.5s;
46  
47 }
48.header a:hover{
49  background-color:rgba(255,255,255,0.5);
50}
51
52  
53
54  
55
56
57.top{
58  
59  background-image:url(https://prog-8.com/images/html/advanced/top.png);
60  background-size:cover;
61  color:white;
62  text-align:center;
63  padding-top:180px;
64  padding-bottom:140px;
65  
66}
67.top h1,p,a{
68  opacity:0.7;
69}
70.top h1{
71  font-size:45px;
72  letter-spacing:5px;
73  
74}
75.register{
76 padding-top:30px;
77}
78.register a{
79  color:white;
80  padding:8px 24px;
81  border-radius:4px;
82}
83.register a:hover{
84  opacity:1;
85}
86.new{
87  background-color:#239b76;
88  opacity:0.8;
89  
90}
91.facebook{
92  background-color:#3b5998;
93  opacity:0.8;
94  margin-right:5px;
95}
96.twitter{
97  background-color:#55acee;
98  opacity:0.8;
99  margin-left:5px;
100}
101.register p{
102 padding-top:15px;
103 padding-bottom:15px;
104}
105.register span{
106  margin-right:5px;
107}
108.lesson-wrapper{
109  background-color:#f7f7f7;
110  height:580px;
111  text-align:center;
112}
113.lesson-wrapper h2{
114  color:#5f5d60;
115  font-weight:normal;
116  padding-top:80px;
117}
118.lessons {
119  width:1170px;
120  margin-left:55px;
121}
122.lesson-icon{
123  float:left;
124  width:25%;
125  margin-top:50px;
126  position:relative;
127  text-align:center;
128  }
129
130.lesson-icon p{
131  position:absolute;
132  top:90px;
133  width:100%;
134  color:white;
135  opacity:1.0;
136}
137.text-contents{
138  font-size:13px;
139  color:#b3aeb5;
140  margin-top:15px;
141  width:80%;
142  display:inline-block;
143}
144.message-wrapper{
145  text-align:center;
146}
147.message{
148  margin-top:80px;
149}
150.message h2{
151  font-weight:normal;
152}
153.button{
154  margin-top:50px;
155  margin-bottom:80px;
156   
157}
158.button a{
159  background-color:#5dca88;
160  color:white;
161  opacity:0.8;
162  padding:15px 40px;
163  border-radius:5px;
164  box-shadow:0 7px #1a7940;
165  opacity:0.8;
166}
167.button a:hover{
168  opacity:1;
169}
170.button a:active{
171  box-shadow:none;
172  position:relative;
173  top:7px;
174}
175footer{
176  border-top:1px solid #eee;
177  padding:30px 0;
178  padding-left:55px;
179}
180footer p{
181  color:#b3aeb5;
182  font-size:12px;
183}
184.footer-parts img{
185  width:124px;
186  
187}

dit.

2020/08/27 01:39

質問に提示の画像とコードを見ただけなのではっきりとはわからないですが、footerよりもその前の部分（さぁ、あなたも…の所）の方が怪しい気がします。文字の色や余白の設定など見直してみてください。

退会済みユーザー

2020/08/27 13:51

全体をもう一度見直しみたらできました。ありがとうございました！

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

回答1件

ベストアンサー

css
1footer{
2  border-top:1px solid #eee;
3  padding:30px 0;
4}
5
6.footer-parts{
7  width: 1170px;
8  margin: 0 auto;
9}

headerだけに関してはこちらを追加すれば問題ありません

・footer-partsで幅及びmargin指定
・~~padding-left:55px;~~padding-leftを使わない

padding-leftは見た目を合わせるだけならいいかもしれませんがどんどんコードが増えてくると通用しなくなりますよ要素を広げているだけなので。

ちなみにこれは予想ですがこれだけで達成はできないと思います。progateは半画面見た目だけを判断しています。そちらのコード全画面表示にしてみましたか？まぁまずしていないと思うので道場編中級者の最初っから回答を見るのをお勧めします。progateの判定だけを信用しないでください。

別の人ですが

質問に提示の画像とコードを見ただけなのではっきりとはわからないですが、footerよりもその前の部分（さぁ、あなたも…の所）の方が怪しい気がします。

文字の色や余白の設定など見直してみてください。

というコメントがある通り全体的に見直す必要があります。一個挙げるなら仕様書に書いてあるのでwidth指定くらいはしましょう。

投稿2020/08/27 06:39

syugaaburesu

総合スコア35

退会済みユーザー

2020/08/27 13:52

全体を見直したらできましたが全然わかってなかったのでもう一度一からやり直します回答とアドバイス頂きありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

HTML & CSS フッターについて

関連した質問