progate 中級　道場編

前提・実現したいこと

さっそく開発するというボタンが四角くならなくて困っています。
これは前回のミッションで、クリアできたのに今回不可になりました

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

エラーメッセージ

該当のソースコード

ソースコード

試したこと

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

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="stylesheet.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> </head> <body> <header> <div class="container"> <div class="header-left"> <img class="logo" src="https://prog-8.com/images/html/advanced/main_logo.png"> </div> <div class="header-right"> <a href="#" class="login">ログイン</a> </div> </div> </header> <div class="top-wrapper"> <div class="container"> <h1>LEARN TO CODE.</h1> <h1>LEARN TO BE CREATIVE.</h1> <p>Progateはオンラインプログラミング学習サービスです。</p> <p>初心者にもやさしいスライドとレッスンで、Webサービスを作りながらプログラミングを学んでいきましょう。</p> <div class="btn-wrapper"> <a href="#" class="btn signup">新規登録はこちら</a> <p>or sign up with</p> <a href="#" class="btn facebook"><span class="fa fa-facebook"></span>Facebookで登録</a> <a href="#" class="btn twitter"><span class="fa fa-twitter"></span>Twitterで登録</a> </div> </div> </div> <div class="lesson-wrapper"> <div class="container"> <div class="heading"> <h2>Learn Where to Get Started!</h2> </div> <div class="lessons"> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/html.png"> <p>HTML & CSS</p> </div> <p class="txt-contents">Webページの作成に使用される言語です。HTMLとCSSを組み合わせることで、静的なページを作り上げることができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/jQuery.png"> <p>jQuery</p> </div> <p class="txt-contents">素敵な動きを手軽に実装できるJavaScriptライブラリです。アニメーション効果をつけたり、Ajax（エイジャックス）を使って外部ファイルを読み込んだりと色々なことができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/ruby.png"> <p>Ruby</p> </div> <p class="txt-contents">オープンソースの動的なプログラミング言語で、シンプルさと高い生産性を備えています。大きなWebアプリケーションから小さな日用ツールまで、さまざまなソフトウェアを作ることができます。</p> </div> <div class="lesson"> <div class="lesson-icon"> <img src="https://prog-8.com/images/html/advanced/php.png"> <p>PHP</p> </div> <p class="txt-contents">HTMLだけではページの内容を変えることはできません。PHPはHTMLにプログラムを埋め込み、それを可能にします。</p> </div> </div> </div> </div> <div class="message-wrapper"> <div class="container"> <div class="heading"> <h2>さぁ、あなたもProgateでプログラミングを学んでみませんか?</h2> <h3>Let's learn to code, learn to be creative!</h3> </div> <span class="btn message">さっそく開発する</span> </div> </div> <footer> <div class="container"> <img src="https://prog-8.com/images/html/advanced/footer_logo.png"> <p>Learn to code, learn to be creative.</p> </div> </footer> </body> </html>

/* CSSのリセット（消さないでください） */
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}

body {
font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}
html, body,
ul, ol, li,
h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}

body {
font-family: 'Hiragino Kaku Gothic ProN W3', sans-serif;
}

li {
list-style: none;
}

a {
text-decoration: none;
}
.container {
width: 1170px;
background-size: cover;
margin: 0 auto;

}

li {
list-style: none;
}
.top-wrapper {
background-image: url(https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
color: white;
padding: 180px 0px 90px 0px;
text-align: center;
}

.top {
background-image: url(https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
padding: 180px 0 100px ;
text-align: center;
height: 348px;
}

.top-contents {
width: 1170px;
margin: 0 auto;
color: white;
}

.top h1 {
opacity: 0.7;
font-size: 45px;
font-weight: bold;
letter-spacing: 5px;
}

.top p {
opacity: 0.7;
font-size: 15px;
}

.btn {
color: white;
padding: 8px 24px;
display: inline-block;
border-radius: 10px;
}

.btn-contents p {
margin: 15px 0 ;
}

.signup {
background-color: #239b76;
opacity: 0.8;
margin-top: 30px;
}

.facebook {
background-color: #3b5998;
opacity: 0.8;
margin-right: 10px;
}

.twitter {
background-color: #55acee;
opacity: 0.8;
}

.fa {
margin-right: 5px;
}

header {
width: 100%;
height: 65px;
background-color: rgba(34,49,52,0.9);
z-index: 10;
position: fixed;
}

.header-top {
width: 1170px;
margin: 0 auto;
}

.logo {
width: 124px;
padding-top: 20px;
}

.header-logo {
float: left;
}

.header-login {
background-color: rgba(255,255,255,0.3);
float: right;
transition: all 0.5s;
}

.header-login a {
color: white;
line-height: 65px;
padding: 0 25px;
}

.header-login:hover {
background-color: rgba(255,255,255,0.5);
}

.lesson-wrapper {
height: 500px;
padding-bottom: 80px;
background-color: #f7f7f7;
text-align: center;
}

.heading {
padding-top: 60px;
padding-bottom: 30px;
color: #5f5d60;
}

.heading h2 {
font-weight: normal;
margin-bottom:50px;
}

.lesson {
float: left;
width: 25%;
color: black;
}
.lesson-icon p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}
.lesson-icon {
position: relative;
}
.txt-contents {
color: #b3aeb5;
width: 80%;
font-size: 13px;
padding-top: 15px;
display: inline-block;
}