I have a problem.
My background image
and my footer don’t take up the whole screen like they should. I tried tinkering with the container property on the css tab
and it didn’t to much.My code is here feel free to copy and paste it on the editor to see what I mean
at Codecademy BestBite
Correct me if I did anything wrong
<!doctype html>
html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link href='https://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 style="text-align:center">BestBite</h1>
</div>
<div class="col-md-4">
<ul class="nav nav-pills">
<li class="active"><a href="#">About</a></li>
<li ><a href="#">Sign Up</a></li>
<li><a href="#">Log In</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4 col-md-offset-2">
<h2>Browse.</h2>
<h2>Create.</h2>
<h2>Share.</h2>
</div>
</div>
</div>
<div class="section banner">
<div class="container">
<h3>Always have the answer to "What's for dinner?"</h3>
</div>
</div>
<div class="section">
<div class="container">
<div class="page-header">
<h3>Newest Contributions</h3>
</div>
</div>
</div>
<div class="footer">
<div class="container">
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
font-family: 'Arvo', serif;
font-size: 16px;
}
.container {
margin: 0 auto;
}
.section {
text-align: center;
padding-top: 40px;
}
/* Header */
.header {
padding: 40px;
}
.header h1 {
margin: 0;
padding: 8px 0 0 0;
}
.nav {
float: right;
width: 340px;
}
.nav-pills li a {
color: #d8192f;
border: 1px solid #d8192f;
margin-left: 10px;
text-align: center;
width: 100px;
}
.jumbotron h2{
color:white;
text-align:right;
}
.nav-pills li.active a,
.nav-pills li.active a:hover,
.nav-pills li a:hover,
.section .btn:hover {
background-color: rgba(216, 25, 47, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
color: #fff;
}
/* Jumbotron */
.jumbotron {
background: url("https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 500px;
padding-top: 25px;
margin-bottom: 0;
}
/* Banner */
.banner, .supporting {
text-align: center;
padding-top: 40px;
}
.banner {
background-color:#36343f;
height:180px;
color: #fff;
}
/* Media Queries */
@media (max-width: 680px) {
.header h1 {
margin-bottom: 20px;
text-align: center;
}
.nav {
float: none;
margin: 0 auto;
}
.banner {
height: 220px;
}
.nav-pills li:first-child a {
margin-left: 0;
}
}
