Progate道場中級lesson　進めません

前提・実現したいこと

progateのHTML&CSSの道場中級のlessonのとこで分からなくなりました。

CSSで答えどうりに書いてるはずなのにいっしょになりません。

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

説明](616df73ab4aaeae7eeb45224726d721a.png)

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

miyabi_pudding

2020/07/12 16:08

Progateの課題なので、自身でやるべきですが、それでもせめて、ソースコードを質問本文に記載してください。

m.ts10806

2020/07/12 21:36

CSSフレームワークは本件とどう関係するのでしょう。あと、全ての人がProgateで習うわけではないですし、「○○の通りに書いた」というのはご自身の自己評価であって、書いた通りにしか動かないプログラムには効きません。そのように書いているからでは。それに本当にその通りに書けている人は見たことがありません。

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

回答1件

「Progate」を触ったことがなく、ソースコードを見ていないので、キャプチャ画像を頼りに勘で回答してみます。

[1] 白背景のエリア (「Learn Where to Get Started!」の箇所) の左右に余白がある

「.container」「.wrapper」「.wrap」などの横幅を制限する要素の子孫要素に白背景のエリアが含まれてしまっているかもしれません。各<section>の内側に「.container」「.wrapper」「.wrap」などの要素を含めるようにしてみてください。

[2] 背景画像が縦方向にも広がってしまっている
bodyに背景画像をしているなら、おそらく間違いです。上述の「白背景のエリア」の1つ前の要素 (兄要素) 、「LEARN TO CODE LEARN TO BE CREATIVE」やSNSボタンなどを囲っている要素に背景画像を指定するようにしてください。
(「LEARN TO CODE LEARN TO BE CREATIVE」などひとまとめにしている要素がなければ追加してください。)

そのうえで、「ひとまとめにしている要素」のpadding-bottomに80pxなど、任意の値 (好きな値) を指定すると、SNSボタンの下に余白をつくることができるようになると思います。

ソースコードを見ずに回答してしまっているので、とんちんかんな内容になっていると思われます。
もし解決しないのであれば、質問内容を編集しソースコードを貼り付けると、解決に直結するような回答を得やすくなると思われますので、試してみてください！

投稿2020/07/12 22:07