Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Basics Controlling Layout with CSS Display Modes CSS Display Modes Challenge

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points
Posted by Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

Im not clear on this css challege question

Not sure of the display value, I've tried the block,inline, and inline-block and they're all incorrect.

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

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}


.main-nav li  {
display:inline
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>

1 Answer

Steven Parker
Steven Parker
216,017 Points
Steven Parker
Steven Parker
216,017 Points

One of your guesses was correct, and you would have passed but the CSS rule is missing the closing brace ("}") at the end.

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points
Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

Thanks, that answers the first part of the challenge. On the second part, they're asking for a block element that doesn't take up a full line. Block,inline-block, and inline wouldn't work.

Steven Parker
Steven Parker
216,017 Points
Steven Parker
Steven Parker
216,017 Points

Once again, you've already tried the correct answer. Look carefully for some issue elsewhere in the structure of the rule.

Show your new code here if you still have trouble spotting it.

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points
Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

Here's the css code: header { text-align: center; } .logo { width: 110px; margin: auto; }

.main-nav li { display:inline-block }

When display is either block or inline, it asks for the correct display value. When the display is set to inline-block, it asks to to make sure I select the main-nav class.

Steven Parker
Steven Parker
216,017 Points
Steven Parker
Steven Parker
216,017 Points

I only see your fixed task 1 code here. Where's the new rule you added for task 2 (the one that selects the main-nav class)?

And when posting code, use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. :arrow_heading_down:   Or watch this video on code formatting.

Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points
Leo Marco Corpuz
Leo Marco Corpuz
18,975 Points

Ok, thanks I got it. I had to make a new css declaration targeting the main-nav class. I thought I just had to change the display value of .main-nav li from the first part.