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

Richard Targett
Richard Targett
4,960 Points

Not sure where I went wrong. Or what it's asking me...

Question about the display elements. what two display options was the lesson on? I resumed after too long a break.

7 Answers

James Copeland
James Copeland
12,550 Points

The question is asking you to place all list items on the same line instead of each list item on its own line. It is also asking for the list items to have block properties. This calls for the "inline-block" display value. This allows each list item to appear on the same line whilst also having block properties.

The correct code would be:

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

Richard Targett
Richard Targett
4,960 Points

Challenge Task 2 of 3

The <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Let's set .main-nav to be as wide as the content inside it.

Change the display of .main-nav to the display value that generates a block element that doesn't take up a full line.

^^^^ Im troubled at the step 2 of 3. I got the inline-block part. But now I dont even know what its asking

jared eiseman
jared eiseman
29,023 Points

It's looking for this:

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

Friendly reminder, you can always go back and review the lesson by clicking the appropriate section across the top of the content.

James Copeland
James Copeland
12,550 Points

It is basically asking for the .main-nav class to also be inline-block. It is requesting a block element (block display value) that also doesn't take up the full line (inline), therefore the display value must be inline-block.

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

should get a pass

jared eiseman
jared eiseman
29,023 Points

It's asking you change the .main-nav to be inline-block in addition to the list items.

.main-nav,
.main-nav li {
  display: inline-block;
}
Richard Targett
Richard Targett
4,960 Points

Okay this got me past. Stack this -_-

Thanks guys.

he <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Let's set .main-nav to be as wide as the content inside it. Change the display of .main-nav to the display value that generates a block element that doesn't take up a full line.

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

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

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