前提・実現したいこと
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}
試したこと
動画を見返して、動画のコードと違う部分を探しましたが見つからず、原因がわかりません。
画像のコードをコピペしたものを該当のソースコードの部分にあります。