Neighborhood Guides: Final touches 8/14


#1

Hi, pretty sure it's something simple I'm missing but I'm having difficulty with this.
Instructions are:

In main.css, make a new CSS rule that selects .neighborhood-guides

Set the background-color to #efefef
Set border-bottom to 1px solid #dbdbdb
Make a second CSS rule that selects the h2 element inside .neighborhood-guides

Set the color to #393c3d
Set the font-size to 24px
Make a third CSS rule that selects the p element inside .neighborhood-guides

Set the font-size to 15px
Set the margin-bottom to 13px

...and my code is:

.neighborhood-guides {
background-color: #efefef;
border-bottom: solid 1px #dbdbdb;
}

.h2 .neighborhood-guides {
color : #393c3d;
font-size: 24px;
}

.p .neighborhood-guides {
font-size: 15px;
margin-bottom: 13px
}

Unfortunately I keep getting,

Set the color of the h2 element inside div class="neighborhood-guides"../div to #393c3d


#2

Aren't "h2" and "p" meant to be between ".neighborhood-guides" and their respective brackets?


#3

For example?

.neighborhood-guides.h2 {
color : #393c3d;
font-size: 24px;
}

Unfortunately still getting the same error message :[


#4

Try removing the last semi-colon in the sequence?


#6

Still the same I'm afraid :fearful:


#7

Sorry to hear that :confused: I made those changes and it fixed it for me. Hope someone more knowledgeable than I can help you!


#8

Only class names are indicated by a . in front, like .neighborhood-guides

h2 is not a class name, so don't put a . on it.

.neighborhood-guides h2 {

#9

You need to make a space bettween the dot and the neighbourhood-guides e.g.. (. neighborhood-guides)

I hop this helped :grinning:


#10

Oh dear, no, don't do that.


#11

Why. What is the problem


#12

If the . isn't right up against the class name then your browser will not recognize that you are trying to indicate a class name and none of the property/value pairs in that CSS rule will be applied.


#13

thanks for letting me know but when I did an earlier that was the problem with my class name and it let me go through.


#14

The code checker hasn't been programmed to check for every possible surprise that new learners come up with :smile:


#15

You should check your web preview and see if any changes you make in your CSS are applied. Trust your eyes.


#16

k Thanks for telling me :grinning: :+1:


#17

Please could you tell me how to correct my thing

<!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>
      </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 class="col-md-4">
      <div class="thumbnail">
       <img src="http://goo.gl/0Kd7UO">
       </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>
		  <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>

I know that it is wrong but i don't know how to change it.


#18

Thanks dude, appreciate it


#19

<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>
<!-- this column should have a closing tag here -->