Positioning columns in task #4

<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.>
The project looks nice, but I would like the three columns to be in a line from left to right, but they are inline from top to bottom. What am I missing?

```

<!doctype html>

BestBite

<div class="jumbotron">
  <div class="row">
    <div class="col-md-4">
    <h2>Browse.</h2>
    <h2>Create.</h2>
    <h2>Share.</h2>
  </div>
  </div>
  <div class="container">
<div class="section banner">
  <div class="container">
    <h3>Always have the answer to "What's for dinner?"</h3>
    <a href="#" class="btn btn-lrg btn-deafult">Learn More</a>
  </div>
</div>

<div class="section">
  <div class="container">
  	<div class="page-header">
  	  <h3>Newest Contributions</h3>
      <div row="col-md-4">
        <h4>Breakfast</h4>
          <ul>
            <li>Pecan Pancakes</li>
            <li>Apple Pancake Sam</li>
          </ul>
        
      </div>
      <div row="col-md-4">
        <h4>
          Lunch
        </h4>
        <ul>
         <li>Chicken Quesadillas</li> 
          <li>Grilled Cheese Sandwiches</li>
        </ul>
      </div>
      <div row="col-md-4">
        <h4>
          Supper
        </h4>
        <ul>
          <li>Lemon Pepper Chicken</li>
          <li>Grass-fed Burgers</li>
        </ul>
      </div>
  	</div>
    
  </div>
</div>

<div class="footer">
  <div class="container">
    <div row="col-md-4">
      <p>
         &copy2014 BestBite
      </p>
      <p class="a-center"><a href="#">BestBite.com</a>
        
      </p>
      <p class="a-right">
        12 Greentree Lane, Orlando, FL
      </p>
    </div>
    
  </div>
</div>
html, body { margin: 0; padding: 0; font-family: 'Arvo', serif; font-size: 16px; }

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

/* Header */
.header {
padding: 40px;
}
.header h1 {
margin: 0;
padding: 0;
}
.nav {
float: right;
width: 340px;

}
.nav-pills li a {
color: #d8192f;
border: 1px solid pink;
margin-left: 10px;
text-align: center;
width: 100px;

}
.nav-pills li.active a {
background-color: #d8192f;
}
.nav-pills li.active a:hover {
background-color: rgba(216,25,47,1);
}
.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) no-repeat center center;
background-size: cover;
padding-top: 25px;
margin-bottom: 0;
}
.jumbotron .row {
float: left;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}

.jumbotron h2:first-child {
margin: 120px 0 0;
}

.jumbotron h2 {
color: #fff;
font-size: 60px;
text-align: right;
margin: 0;
width: 100%;
}

/* Banner */

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

}
.section {

text-align: center;
padding-top: 40px;

}
.section h3 {
margin: 0;
padding: 0;
font-size: 30px;
}
.banner h3 {
margin: 0;
padding: 0;
color: #fff;
}
.section h4 {
color: #d8192f;
margin: 30px 0 20px;
padding: 0;
font-size: 20px;
}
.section ul {

list-style-type: none;
margin-top: 10px;
padding: 0;

}
.section .btn {
background-color: rgba(216,25,47,.5);
border: 0px;
margin-top: 24px;
color: #fff;

}

.footer {
background-color: #eeeeee;
height: 100px;
padding: 40px 0 100px;
font-size: 14px;
}
.footer p {
float: left;
width: 33%;

}
.footer a {
color: #d9182f;
}

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

.a-right {
text-align: right;

}

/* 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;
}
}

<do not remove the three backticks above>

Jen the advisor helped me solve this problem. I had too many <div row="col-md-4">'s and not enough <div class="col-md-4">'s. Thanks!

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