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 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
229,732 Points
Steven Parker
Steven Parker
229,732 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
229,732 Points
Steven Parker
Steven Parker
229,732 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.