ATOMのCSSでfooterだけコード通りにならない

前提・実現したいこと

CSSでfooterをより見やすくしたい。

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

　ドットインストールの動画で学習中なのですが、headerへのコードをコピぺしてfooterに変更したところ、headerには反映されていたのですが、footerには反映されていませんでした。自分では、メール、吹き出し、カメラのアイコンの左にある「・」を消して、アイコンを横並びにする。(c)Taro Yamadaの色を薄くして右寄せにするなどの変更を入力したつもりでした。

該当のソースコード

HTML
1
2<footer>
3    <ul>
4      <li>
5        <a href="mailto:taguti@gmail.com"target="_blank">
6          <img src="img/mail.png" width="20" height="20" alt="メール送信">
7        </a>
8      </li>
9      <li>
10        <a href="https://dotinstall.com"target="_blank">
11          <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ">
12        </a>
13      </li>
14      <li>
15        <a href="https://dotinstall.com"target="_blank">
16          <img src="img/photos.png" width="20" height="20" alt="写真サイトへ">
17        </a>
18      </li>
19    </ul>
20    <p>(c)Taro Yamada</p>
21  </footer>

CSS
1
2footer {
3width: 400px;
4margin: 0 auto 60px;
5}
6
7footer ul{
8  margin:0;
9  list-style-type: none;
10  padding-left:0;
11  float:left;
12}
13
14footer li{
15  display:inline-block;
16}
17
18footer li > a:hover{
19  opacity:0.6;
20}
21
22footer p{
23  color:lightgray;
24  font-size:14px;
25  text-align:right;
26}

試したこと

動画を見返して、動画のコードと違う部分を探しましたが見つからず、原因がわかりません。

画像のコードをコピペしたものを該当のソースコードの部分にあります。

dit.

2019/01/11 07:38 編集

teratailにはコードを見やすくするための仕組みがあります。よくわからなければ、「HTMLの部分」を選択して<code>というボタンを押してください。 ```html コード ``` となるように（CSSも同様に）します。 https://teratail.com/help/question-tips#questionTips3-5-1　を参考に。その際HTMLの行とCSSの行の間は詰めず、空白行等を入れて下さい。

0220JiatengGC

2019/01/11 07:45

回答ありがとうございます。変更することができました。

dit.

2019/01/11 07:49

おそらく「記述通りの動作」をしています。キャッシュのクリア等は試しましたか？

yoshinavi

2019/01/11 08:01

私の環境では、CSSは反映されていました。「dit.」さんご提案のキャッシュクリアでも違いが出るのであれば、headerの場合とfooterの場合のコード、スクリーンショット等を提示されると良いかと思います。

0220JiatengGC

2019/01/11 08:11

ありがとうございます。スクリーンショットを追加しました。

0220JiatengGC

2019/01/11 08:27

キャッシュクリアしましたが、改善しませんでした。

m.ts10806

2019/01/11 10:09

スクリーンショットはコードではなくブラウザで見たときの画面でないと意味がないような

yoshinavi

2019/01/12 05:02

「mts10806」さんのコメントのとおり、まず結果の違いを見るために「ブラウザで見た場合」のスクリーンショットが良いです、それと、違いについて回答者が検証できるように各コードを、「コードブロック」で提示されると、多くの方より、検証結果に基づいた「回答」がつきやすくなるかと思います。

0220JiatengGC

2019/01/12 10:59

遅くなりました。ブラウザでみたスクリーンショットに変更しました。

yoshinavi

2019/01/12 11:36

提示のコードと、スクリーンショットは「footer」の場合ですよね。「比較」する場合、もうひとつの比較対象が必要になりますので、「header」の場合も、各コードとスクリーンショットを提示してください。慌てなくても大丈夫ですよ。落ち着いて、ひとつひとつ確認して質問を編集してください。問題点が、回答者へ理解しやすい質問であれば、より多くの回答を得れると思います。

0220JiatengGC

2019/01/12 11:50

失礼いたしました。 headerとfooterのコードとブラウザを追加しました。まだ足りないものがあればお願いいたします。

yoshinavi

2019/01/12 12:18

headerとfooterは「同じCSSファイル」に記述されていますか？

0220JiatengGC

2019/01/12 12:33

はい。同じCSSファイルに記述しています。

yoshinavi

2019/01/12 13:41

header部分とfooter部分だけにした、HTML・CSSファイルの提示は可能ですか？または、その状態のままブラウザで確認してみてください。