Progate のHTML 初級道場コースの「お問い合わせ」フォームについて
どうしても、画像コンテンツと被ってしまいます。
左下に表示させるにはどうコーディングしたらいいのでしょうか?
書いたHTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <!-- ここからHTMLを書き始めてください --> <header> <div class="header-logo"> Progate </div> <div class="header-list"> <ul> <li>プログラミングとは</li> <li>学べるレッスン</li> <li>お問い合わせ</li> </ul> </div> </header> <section class="main"> <div class="top-wrapper"> <div class="container"> <div class="top-title"> <h1>HELLO WORLD<span>.</span></h1> <h2>プログラミングの世界へようこそ</h2> </div> </div> </div> <div class="lesson-wrapper"> <div class="container2"> <div class="section-title"> <h3>学べるレッスン</h3> </div> <div class="contents"> <div class="img"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg" alt="" /> <p>HTML & CSS</p> </div> <div class="img"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg" alt="" /> <p>PHP</p> </div> <div class="img"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg" alt="" /> <p>Ruby</p> </div> <div class="img"> <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg" alt="" /> <p>Swift</p> </div> </div> </div> </div> <div class="contact-wrapper"> <div class="container3"> <div class="section-title"> <h3>お問い合わせ</h3> </div> </div> </div> </section> </body> </html>
書いたCSS
/* CSSのリセット(消さないでください) */ html, body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, input, div { margin: 0; padding: 0; } li { list-style: none; } body{ font-family: "Avenir Next", "Hiragino Kaku Gothic ProN W3", sans-serif; } .container{ padding:100px 80px; } .container2{ padding: 0 80px ; } .container3{ padding: 0 80px ; } .main{ height:1160px; width:100%; } /* header */ header{ height:90px; background-color:#26d0c9; color:white; } .header-logo{ font-size:36px; float:left; padding:20px 40px; } .header-list li{ float:left; padding:33px 20px; } .top-title h1{ font-size:140px; } .top-title span{ color:red; } .top-title h2{ font-size:60px; } /* main */ .section-title h3{ font-size:28px; border-bottom:2px solid #dee7ec; padding-bottom:15px; margin-bottom:50px; } .img { float:left; margin-right:40px; } .img p{ font-size:24px; padding-top:30px; padding-bottom:100px; }
追記
使用したブラウザはGoogle Chromeになります。
回答3件
あなたの回答
tips
プレビュー