Trouble with "7. Neighborhood Guides: Images 2"


#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>Neighborhood Guides</h2>
    <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
    
    <div class="row">
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0sX3jq">
    </div>
    
    <div class="thumbnail">
    <img src="http://goo.gl/an2HXY">
    <div class="col-md-4">
    </div>
    
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/Av1pac">
    </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">
			<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
Keep getting error: Add a <div class="thumbnail">..</div>

#3
  • You have four column divs instead of the expected three.
  • Your first thumbnail doesn't have a matching closing tag.
  • Your first column doesn't have a matching closing tag.
  • Your neighborhood-guides and its container do not have matching closing tags.

#4

I started over and still can't figure it out


#5

It looks like you are getting closer.

To troubleshoot a missing tag/div problem, first start lining up your matching open/close tags so that both tags are at the same indent level. That will give you visual clues and let you easily notice where you have missed/added something.

Keeping your matching open/close tags at the same indent level will help you see what you are building.

The pattern you are aiming for is:

	<div class="neighborhood-guides"> <!-- start neighborhood-guides -->
	  <div class="container"> <!-- start container -->
	    <h2>Neighborhood Guides</h2>
	    <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
	
	    <div class="row"> <!-- start row -->
	
	      <div class="col-md-4"> <!-- start 1st column -->
	        <div class="thumbnail">
	           ... first thumbnail code here
	        </div>
	        <div class="thumbnail">
	           ... second thumbnail code here
	        </div>
	      </div> <!-- close 1st column -->
	
	      <div class="col-md-4"> <!-- start 2nd column -->
	         <div class="thumbnail">
	           ... third thumbnail code here
	        </div>
	        <div class="thumbnail">
	          ... fourth thumbnail code here
	        </div>
	      </div> <!-- close 2nd column -->
	
	      <div class="col-md-4"> <!-- start 3rd column -->
	        <div class="thumbnail">
	           ... fifth thumbnail code here
	        </div>
	      </div>  <!-- close 3rd column -->
	
	    </div> <!-- close row -->
	
	  </div> <!-- close container -->
	</div> <!-- close neighborhood-guides -->

#6

Really helpful, thank you, I fixed my code for this :+1: :grin: :+1: