Neighborhood Guides:Grid


#1

I get the error msg:

Oops, try again. Make sure the <div class="neighborhood-guides">..</div> is after the jumbotron.

This is my code:

<!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">
      <div class="row">
      <div class="col-md-4">
        <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 class="col-md-4>
    </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>
    
    <div class="col-md-4">
    </div>
    
    <div class="col-md-4">
    </div>
    </div>
    </div>
    </div>

    <div class="learn-more">
	  <div class="container">
		<div>
	      <div>
			<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>
			<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>
			<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>

Why am I getting an error for this? I read some other posts and I still think I did the code correctly.


#3

It is unexpected to find a row and column inside your nav div -- how did they get there?

And you have the following empty column sitting between your nav and jumbotron, again, I'm not sure how that got there.

      </div>
      
      <div class="col-md-4>
    </div>

    <div class="jumbotron">

#4

Sorry, I copy and pasted my neighborhood guides code multiple times in different places, so maybe that is how they got there


#5

Yes, that might do it. If things get too messy, you can use the Reset Code button to start fresh.


#6

After doing reset code, I still have the row and column inside the nav div.


#7

That means that you must have had them like that even in the previous exercise. The Reset Button pulls the code from the previous exercise forward.


#8

Okay, but after copy and pasting the neighborhood guide code, I still find that the error message continues to stay. (I copy and pasted it after the jumbotron div after hitting reset code)


#9

Show me your whole index.html file again so I can what you have there now.


#10

I will show you my entire index.html file after I redo the current code, just to make sure I made no mistakes


#11
<!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">
      <div class="row">
      <div class="col-md-4">
        <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 class="col-md-4>
    </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>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    </div>
    </div>
    </div>
    
    <div class="learn-more">
	  <div class="container">
		<div>
	      <div>
			<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>
			<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>
			<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>

#12

The things that I mentioned back in my first reply, I still see them in your code now. You are going to have to delete those.


#13

Okay, I will see if that fixes the problem.


#14

Thanks. Turns out, that fixed my problem! I'm not sure how they ended up there in the first place, and how it didn't tell me it was wrong before, but now it works, so thanks!


#16

i have the same error

but index.html seems fine to me


#17


#18

You have to use the US spelling of "neighborhood-guides" because that is what the code checker is looking for.


#19

i did as you said still does not do the trick :frowning:


#20

In your screenshot, it looks like you haven't added the row div with the three columns inside of it.


#21

i will reset and try again. thanks for being so responsive ^^


#25

Here is a more full version of what I did.