7. Neighborhood Guides: Image 2 WHAT IS WRONG WITH THIS


#1

    <!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
  </head>

  <body>

    <div class="nav">
      <div class="container">
        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
        <a href="#">Learn More</a>
      </div>
    </div> 

<div class = "neighborhood-guides">
    <div class = "container">
        <h2>Neighbordhood Guides</h2>
        <p>Not sure where to stay? We've created neightborhood guides for cities all around the world.</p>

<div class = "row">

    <div class = "col-md-4">
    <div class = "thumbnail">
        <img src="http://goo.gl/Av1pac">
        </div>
        </div>
        </div>
        <div class="thumbnail">
        <img src = "http://goo.gl/vw43v1">
        </div>
        </div>
 
    <div class = "col-md-4">
    <div class = "thumbnail">
        <img src = "http://goo.gl/0Kd7UO">
        </div>
    </div>
</div>

    <div class="learn-more">
	  <div class="container">
	  <div class="row">
	  <div class="col-md-4">
	  
	  </div>
	      <div class="col-md-4">
			<h3>Travel</h3>
			<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
			<p><a href="#">See how to travel on Airbnb</a></p>
	      </div>
		  <div class="col-md-4">
			<h3>Host</h3>
			<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
			<p><a href="#">Learn more about hosting</a></p>
		  </div>
		  <div class="col-md-4">
			<h3>Trust and Safety</h3>
			<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
			<p><a href="#">Learn about trust at Airbnb</a></p>
		  </div>
	    </div>
	  </div>
	</div>
  </body>
</html>

#2

You need to take control of your open/close tags. Don't let the divs win! :smile: Make them do what you want them to do.

The advice in here will help:

The plan is for your neighborhood-guides div to have one row that contains three columns. Currently you have only two columns there.

You should probably step back to exercise 5, that's the one where we first created our row and columns. Take the advice, and put comments on your closing tags.

Here is the beginning of your row as you have it now:

<div class = "row">

    <div class = "col-md-4">
    <div class = "thumbnail">
        <img src="http://goo.gl/Av1pac">
        </div>
        </div>
        </div>
        <div class="thumbnail">
        <img src = "http://goo.gl/vw43v1">
        </div>
        </div>

Here is what you get if you start taking the advice in that link I gave you:

<div class = "row">

    <div class = "col-md-4">
        <div class = "thumbnail">
            <img src="http://goo.gl/Av1pac">
        </div> <!-- ends thumbnail -->
    </div> <!-- ends col-md-4 -->
</div> <!-- ends row -->

<div class="thumbnail">
    <img src = "http://goo.gl/vw43v1">
</div> <!-- end thumbnail -->
</div> <!-- not sure what this one ends -->

Now you can see that you have closed your first column and the row after the first thumbnail.

The plan is to have two thumbnails in both the first and second columns and to keep the row open until the third column is finished.

Are you getting the idea of what you are meant to be building now?