Footer Alignment

<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_bestbite?user_id=576f18811ec4b0e67600052c

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
I can’t get the footer to align as shown in the example. I’m sure this is something obvious; I’ve just been looking at this too long. https://s3.amazonaws.com/codecademy-content/projects/bestbite/index.html

```

<!doctype html>

<div class="header">
  <div class="container">
			<div class="row">
			<div class="col-md-6">
      	<h1>BestBite</h1>
      </div>
			<div class="col-md-6">
      	<ul class="nav nav-pills">
					<li role="presentation" class="active"><a href="#">About</a></li>
					<li role="presentation"><a href="#">Sign Up</a></li>
					<li role="presentation"><a href="#">Log In</a></li>
<div class="jumbotron">
  <div class="container">
			<div class="row">
			<div class="col-md-3 col-md-offset-3">
      	<h2>Purchase.</h2>
        <h2>Consume.</h2>
        <h2>Spend Money.</h2>
      </div>
<div class="section banner">
  <div class="container">
    <h3>Always have the answer to "What's for dinner?"</h3>
    <button type="button" class="btn">Learn More</button>
  </div>
</div>

<div class="section">
  <div class="container">
  	<div class="page-header">
  	  <h3>Newest Contributions</h3>
  	</div>
    <div class="row">
			<div class="col-xs-6 col-md-4">
        <h4>Breakfast</h4>
        <p>Hot Dogs</p>
      </div>
			<div class="col-xs-6 col-md-4">
        <h4>Lunch</h4>
        <p>"No Time For Lunch" Piece of Cheese</p>
        <p>Energy Drinks & Beans</p>
      </div>
			<div class="col-xs-6 col-md-4">
        <h4>Dinner</h4>
        <p>Microwaved Ground Beef</p>
        <p>Chocolate Milk</p>
      </div>
			</div>
    </div>
  </div>


<div class="footer">
  <div class="container">
        <p>2014 BestBite</p>
        <a href="http://bestbite.com">www.bestbite.com</a>
        <p>12 Greentree Lane, Orlando, FL</p>
			</div>
</div>

html, body {
margin: 0;
padding: 0;
font-family: ‘Arvo’, serif;
font-size: 16px;
}

.container {
max-width: 940px;
margin: 0 auto;
}

/* Header */
.nav-pills li a {
color: #d8192f;
}

.btn {
border: none;
background-color:rgba(216,25,47,.5);
color: white;
padding: 10px;
margin-top: 5px;
font-size: 15px;
}

.nav-pills li.active a,
.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 {
height: 500px;
background:url(https://s3.amazonaws.com/codecademy-content/projects/bestbite/bg.jpg);
background-position: center;
background-size: cover;
}

.jumbotron h2 {
color: white;
font-size: 50px;
}

.jumbotron h2:nth-child(2) {
margin-left: 20px;
}

.jumbotron h2:nth-child(3) {
margin-left: 40px;
}

/* Banner */
.banner, .supporting {
text-align: center;
padding-top: 40px;
}

.banner {
background-color:#36343f;
height:180px;
color: #fff;
}

p {
text-align: center;
}

h4 {
text-align: center;
}

h3 {
text-align: center;
}

.footer {
background-color: #eeeeee;
text-align: center;
}

.a-center{
text-align: center;
float: center;
}

.a_right{
text-align: center;
float: right;
}

.btn-default {
color:rgba(216,25,47,.5);
}

.nav-pills li:first-child a {
margin-left: 0;
}
/* Media Queries */
@media (max-width: 680px) {
.header h1 {
margin-bottom: 20px;
text-align: center;
}
.nav {
float: none;
margin: 0 auto;
}
.banner {
height: 220px;
}
}

<do not remove the three backticks above>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.