<PLEASE USE THIS TEMPLATE TO HELP YOU CREATE A GREAT POST!>
<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bolt-network
<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
There is unnecessary white space in the middle of a website.
Rest of them is a disaster but this is the biggest problem right now.
HTML
<body>
<div class="jumbotron">
<div class="container">
<div class="header">
<div class="row">
<div class="col-md-2">
<img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg" width="180" height="34">
</div>
<div class="pull-right">
<ul>
<li>Log in</li>
<a href="#" class="btn btn-default">Sign up</a>
</ul>
</div>
</div>
</div>
<div class="main">
<h1>Watch your favorite movies, instantly.</h1>
<a href="#" class="btn btn-default">Learn more</a>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="search" placeholder="Browse the collection"/>
<button type="submit" class="btn btn-submit">Search</button>
</div>
</form>
</div>
</div>
</div>
<div class="supporting">
<div class="container">
<h2>A world of movie at your fingertips</h2>
<p>Choose from the latest titles, with new movies added every day.</p>
CSS
html, body {
font-family: "Oxygen", sans-serif;
font-weight: 300;
margin: 0;
padding: 0;
}
.container {
max-width: 970px;
}
.jumbotron {
background-color:#000000;
height:600px;
color:inherit;
margin-bottom:30px;
padding:30px;
}
.header {
color:#FFFFFF;
}
.row {
margin-left:-15px;
margin-right:-15px;
}
.pull-right {
float:right !important;
}
.header ul {
list-style:none;
}
.header li {
display:inline;
margin-right:30px;
color:#0393FF;
}
.jumbotron .btn {
background:transparent;
border:1px solid #0393FF;
border-radius:2px;
color:#0393FF;
padding:8px 20px;
}
.jumbotron h1 {
color:#FFFFFF;
font-weight:300;
margin-bottom:40px;
margin-top:80px;
}
form {
margin-top:80px;
}
.form-group {
margin-bottom:15px;
}
.supporting {
padding-bottom:80px;
background:#161616;
}
.supporting h2, .feature h1 {
color:#0393FF;
font-size:32px;
font-weight:300;
margin-bottom:10px;
margin-top:60px;
}
.supporting p {
font-size:16px;
margin-bottom:45px;
}
.main, .supporting h2, .supporting p, .feature {
color:#FFFFFF;
text-align:center;
}
Thanks in advance.
