Can't get footer right


#1


https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bestbite


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>
<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-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>
    
  </body>
</html>


#2

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>

#3

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.


#4

I forgot one piece of code that made it work.

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

#5

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