Can't get footer right

<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

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>
I followed the instructions very closely, and the columns still won’t behave! The first stays at the left, and the other two go beneath it in the center. I have no idea what could be wrong with my code. Why doesn’t the Bootstrap column method work here, anyway?!

```

<!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="https://drive.google.com/file/d/0B9hOWk9OglDBMVlQZ0ZfdVlKRnM/view">About</a></li>
                      <li role="presentation"><a href="http://getbootstrap.com/components/#nav">Sign Up</a></li>
                      <li role="presentation"><a href="http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div">Log In</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>            
  
<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-md-3 col-md-offset-3">
        <h1>
          Browse.
        </h1>
        <h1>
          Create.
        </h1>
        <h1>
          Share.
        </h1>
      </div>
    </div>
  </div>
</div>

<div class="section banner">
  <div class="container">
    <h3>Always have the answer to "What's for dinner?"</h3>
    <a class="btn btn-default"; href="http://getbootstrap.com/css/#buttons"; role="button">Learn More</a>
  </div>
</div>

<div class="section">
  <div class="container">
      <div class="page-header">
        <h3>Newest Contributions</h3>
      <div class="row">
        <div class="col-md-4">
          <h3>
            Breakfast
          </h3>
          <ul>
            <li>French Toast</li>
            <li>Scrambled Eggs</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h3>
            Dinner
          </h3>
          <ul>
            <li>Fish and Chips</li>
            <li>Lasagna</li>
          </ul>
        </div>
        <div class="col-md-4">
          <h3>
            Dessert
          </h3>
          <ul>
            <li>Flan</li>
            <li>Key Lime Pie</li>
          </ul>
        </div>
      </div>
      </div>
  </div>
</div>

<div class="footer">
  <div class="container">  
      <p>&copy2014 BestBite</p>
      <p class="a-center">BestBite.com</p>
      <p class="a-right">12 Greentree Lane, Orlando, FL</p>
  </div>
</div>
<do not remove the three backticks above>

you can use text-center for center and text-right for right

    <div class="footer">
      <div class="container">  
          <p>&copy2014 BestBite</p>
          <p class="text-center">BestBite.com</p>
          <p class="text-right">12 Greentree Lane, Orlando, FL</p>
      </div>
    </div>

I am having the same trouble. I have them in the correct position left, center, and right but each one drops down a line. I have tried running them inline but then they will be all stuck together.

I forgot one piece of code that made it work.


.footer .container p{
  float:left;
  position:relative;
  width:33%;
}

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