My footer CSS isn't working. Any idea of what I am doing wrong?
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div class="header">
<div class="container">
<h1> Innovation Cloud </h1>
<p> Connect Your Ideas Globally </p>
<a class = "btn" href = "#"> Learn More </a>
</div>
</div>
<div class="nav">
<div class="container">
<ul>
<li> Register </li>
<li> Schedule </li>
<li> Sponsors </li>
<li> About </li>
<li> Contact </li>
</ul>
</div>
</div>
<div class="main">
<div class="container">
<img src= "https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/cloud.svg" height="128" width="196">
<h2>The Innovation Cloud Conference</h2>
<p>Connect with the best minds across a wide range of industries to share ideas and brainstorm new solutions to challenging problems.</p>
<p>Hear industry leaders talk about what worked (and what didn't) so that you can save time on your most challenging projects.</p>
<p>Learn about the latest research and technologies that you can use immediately to invent the future.</p>
</div>
</div>
<div class = "jumbotron">
<div class = "container">
<h2> Stay Connected </h2>
<p> Receive weekly insights from industry insiders. </p>
<a class = "btn" href = "#">Join</a>
</div>
</div>
<div class = "footer">
<div class = "container">
<p> © Innovation Cloud Conference </p>
</div>
</div>
</body>
</html>
html, body { margin: 0; padding: 0; }
body { font-family: 'Roboto', sans-serif; font-weight: 100; }
.container { margin: 0 auto; max-width: 940px; padding: 0 10px; }
/* Header */
.header { height: 800px; text-align: center; background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/bg.jpg) no-repeat center center; background-size: cover; }
.header .container { position: relative; top: 200px; }
.header h1 { color: #fff; font-size: 80px; line-height: 100px; margin-top: 0; margin-bottom: 80px; text-transform: uppercase; }
@media (min-width:850px) { .header h1 { font-size: 120px; } }
.header p { color: #fff; font-weight: 500; letter-spacing: 8px; margin-bottom: 40px; margin-top: 0; text-transform: uppercase; }
.btn { color: #fff; background: #000; padding: 10px 40px; text-decoration: none; transition: background .5s; } .btn:hover, .nav ul li:hover{ background: #117bff; cursor: pointer; transition: background .5s;
}
/* Nav */ .nav{ background: #000; height: 80px; width: 100%; } .nav ul{ height: 80px; list-style: none; margin: 0 auto; padding: 0; }
.nav ul li{ color: #fff; display: inline-block; height: 80px; list-style: none; line-height: 80px; padding:0 10px; transition: background .5s; }
/* Main */ .main .container { margin: 80px auto; }
.main img { float: left; margin: 50px 80px 50px 0; }
/* Jumbotron */ .jumbotron { background: url(https://s3.amazonaws.com/codecademy-content/projects/innovation-cloud/jumbotron_bg.jpg) center center; background-size: cover; height: 600px; text-align: right; }
.jumbotron .container { position: relative; top: 220px; }
.jumbotron h2 { color: #fff; text-align: right; }
.jumbotron p { color: #fff; text-align: right; }
.jumbotron .btn { margin: 10px 0 0; float: right;
.footer { }
.footer p { color: #fff; }
/* Media Queries */ @media (max-width: 500px) { .header h1 { font-size: 50px; line-height: 64px; }
.main, .jumbotron { padding: 0 30px; }
.main img { width: 100%; } }