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 Rene Armenta
Rene Armenta
1,469 Points

any help

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

.more {
  display:none;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with CSS Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
    <body>
    <div class="container">
        <header>
            <img class="logo" src="city-logo.svg" alt="logo">
            <ul class="main-nav">
                <li><a href="#">Ice cream</a></li>
                <li><a href="#">Donuts</a></li>
                <li><a href="#">Tea</a></li>
                <li><a href="#">Coffee</a></li>
            </ul>
        </header>
    </div>
    </body>
</html>
Nathan Piper
Nathan Piper
5,711 Points

you need to set the display to inline-block as list items are set as block level elements by default meaning they will take up the full width of the parent.

1 Answer

Rohald van Merode
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff
Rohald van Merode
.a{fill-rule:evenodd;}techdegree
Rohald van Merode
Treehouse Staff

Hi Rene Armenta,

Could you be a bit more specific as to what you need help with? As Nathan mentioned for the second challenge you'll want to set the display for the .nav-btn elements to inline-block. I noticed however that the index.html you've shared doesn't match the html provided in the challenge that might cause the challenge not to pass the tests. If that is the case here's the HTML as provided for this challenge:

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>