Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout CSS Layout Techniques Display

Posted by PAUL RENTLE
PAUL RENTLE
1,449 Points

been having really tough time with this challege. .nav-btn { display:inline-block; width:120px; }

style.css 
/* Complete the challenge by writing CSS below */



.more {

 display:none; 

}


.nav-btn li{
  display: inline-block;

 width: 120px;
}
index.html 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <title>CSS Layout</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <header>
      <nav>
        <ul>
          <li class="nav-btn"><a href="#">Donuts</a></li>
                  <li class="nav-btn"><a href="#">Tea</a></li>
                  <li class="nav-btn"><a href="#">Coffee</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h1>Donuts</h1>
        <p>Donuts are sweet snacks usually deep fried from a flour dough. The best place to buy donuts is at a bakery or specialty donut shop. Donuts go great with coffee.</p>
        <a href="#">Read more</a>
        <p class="more">In this paragraph, you’ll learn lots more interesting facts about donuts. For example, did you know that the largest donut ever made was a jelly donut weighing more than one and a half tons? It measured 16 feet in diameter and 16 inches high in the center.</p>
      </article>
    </main>
  </div>
</body>
</html>
Danny Dickson
Danny Dickson
19,293 Points
Danny Dickson
Danny Dickson
19,293 Points

TLDR; the correct code is as follows: 

p.more {
  display: none;
}

(see below for additional context)

The key to the answer is actually in the question itself. "The paragraph with a class called more". They're asking you to be slightly more specific. The code you wrote will apply to any type of HTML element with the class .more. Adding a p to your selector (like in the code block above) is slightly more specific because it only applies to paragraph elements with a class of .more (and is what they're asking for in this case). Alternatively, you could target all paragraph elements with just the letter p, like so:

p {
  display: none;
}

However, if you're not specific enough with your selectors, you can end up affecting things you don't intend to with your CSS. This is a really important concept for CSS called specificity.

You can read more about it here if you're curious: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Anyway, hope this helps, and keep going! It gets easier as you practice more.

2 Answers

PAUL RENTLE
PAUL RENTLE
1,449 Points
PAUL RENTLE
PAUL RENTLE
1,449 Points

.nav-btn li{ display: inline-block;

width: 120px; }

shouuld be

nav-bar {

display: inline-block;

width: 120px }

Dont need to specify li, nav-bar is enough.

Bella Bradbury
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points
Bella Bradbury
.a{fill-rule:evenodd;}techdegree seal-36
Bella Bradbury
Front End Web Development Techdegree Graduate 32,790 Points

Hello Paul!

Your css declarations are spot on! The problem you're having actually comes from your selector. Your code isn't working as expected because order is actually very important when it comes to css selectors. By putting the class first you're instructing the css to look for the .nav-btn class and then look for <li> elements that are children of that class. The problem of course is that there are no elements that meet that criteria because the class we've specified doesn't have any list elements as children. Let's look at two possible solutions now!

  1. We can put the <li> tag first and then the class. In this scenario the code would find all of the list items and then look for which of those elements also have the .nav-btn class. 

    li.nav-btn {
...
}

  2. We can simply use the class selector because there's no other elements with the specified class:

.nav-btn {
  ...
}

Hope this helps!