progateの上級編の模写をしようとしています。
下記のコードで書いているとheaderの下に意図しない余白ができてしまいます。
検証ツールで調べても余計な余白は設定してないように思います。
これはサイト(chrome)側の表示の問題なのでしょうか。
それとも何かコードが間違っているのでしょうか。
ご回答お願い致します。
html
1<html> 2 <head> 3 <mata charset="utf-8"> 4 <link rel="stylesheet" href="stylesheet.css"> 5 </head> 6 <body> 7 <header> 8 <div class="header-left"> 9 <img class="logo" src="img/main_logo.png"> 10 </div> 11 <div class="header-right"> 12 <a href="#">レッスン</a> 13 <a href="#">新規登録</a> 14 <a href="#">ログイン</a> 15 </div> 16 </header> 17 <div class="top-wrapper"> 18 <div class="container"> 19 <h1>LEARN TO CODE.</h1> 20 <h1>LEARN TO BE CREATIVE.</h1> 21 <p>progateはオンラインプログラミング学習サービスです。</p> 22 <p>初心者にもやさしいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p> 23 </div> 24 </div> 25 </body> 26</html>
CSS
1header { 2 background-color: rgba(47,79,79,0.8); 3 line-height: 65px; 4 height: 65px; 5} 6 7.header-left { 8 float: left; 9} 10 11.logo { 12 width: 124px; 13 padding: 20px 0px; 14} 15 16.header-right { 17 float: right; 18} 19 20.header-right a { 21 padding: 0 24px; 22 color: white; 23} 24 25.top-wrapper { 26 background-image: url(img/top.png); 27 background-size: cover; 28}
回答2件
あなたの回答
tips
プレビュー