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

Posted by Stu Cowley
Stu Cowley
26,287 Points

Eep I Should Know This! CSS Display Modes Challenge Part 2

Hi everyone,

Either I'm having a complete lapse in mental concentration but I just can't seem to figure out question 2 of the "CSS Display Modes Challenge".

The question asks "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."

I just can't seem to figure it out! Here is are the styles that I am using.

header {
    text-align: center
}

.logo {
    width: 100px;
    margin: auto;
}

/* My answer */
.main-nav ul,
.main-nav li {
    display: inline-block;
}

I will keep trying to get the right answer, and if I somehow manage to solve it, I'll post up my answer.

Any hints would be highly appreciated!

Thanking you in advance,

Stu :)

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

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

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

13 Answers

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,860 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,860 Points

Hey Stu,

Did you try going simple and just use the class selector, without any element selectors...

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

:)

Stu Cowley
Stu Cowley
26,287 Points

Ah yes of course, as soon as I saw this I was like, duh. Thank you so much Jason Anders! I knew it'd be something like that, but I guess the most experienced CSS specialists forget simple concepts like this from time to time...

Chanda Helms
Chanda Helms
10,790 Points

.main-nav li {display: inline-block} .main-nav {display: inline-block} worked for me as well!!!!!!

Inevitable Walrus
Inevitable Walrus
10,032 Points
Inevitable Walrus
Inevitable Walrus
10,032 Points

It seems a bit odd that this challenge asks you to essentially repeat yourself. For the first part of the challenge I actually set ".main-nav {display:inline-block;}" because I kind of had a feeling that this would be the desired end result. Took me a couple minutes of head-scratching before I realized they actually wanted me to repeat myself.

chris barnhart
chris barnhart
6,514 Points
chris barnhart
chris barnhart
6,514 Points

I think this one has tripped a lot of people up! It took me 45 min to get it!

Kent Worthington
Kent Worthington
2,015 Points
Kent Worthington
Kent Worthington
2,015 Points

There shouldn't be any need to repeat it, but nevertheless, I tripped over it as well.

Gavin Mace
Gavin Mace
30,747 Points
Gavin Mace
Gavin Mace
30,747 Points

I just did this one with the question:

"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."

.... I kinda hit a dead-end when I assumed that the class was:

.main-nav ul { }

rather than just

.main-nav { }

Thorbjørn Bak Jensen
Thorbjørn Bak Jensen
15,043 Points
Thorbjørn Bak Jensen
Thorbjørn Bak Jensen
15,043 Points

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

FINALLY worked for me

David Low
David Low
8,214 Points
David Low
David Low
8,214 Points

why does this in no way work for me? every time I take the li off the code it goes "oops! looks like task one is no longer passing."

Brigette Eckert
Brigette Eckert
16,957 Points

You have to be reduntant and put 

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

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

at least I had to to pass this challenge.

Melvin Ho YK
PLUS
Melvin Ho YK
Courses Plus Student 25,247 Points
Melvin Ho YK
Melvin Ho YK
Courses Plus Student 25,247 Points

Just add on .main-nav into existing code like... ''' CSS .main-nav, .main-nav li { display: inline-block; } '''

Melvin Ho YK
Melvin Ho YK
Courses Plus Student 25,247 Points

Sorry about the syntax. Here you go Just add on .main-nav into existing code like... 

.main-nav, 
.main-nav li { 
display: inline-block; 
} ```
Motuma Kaba
Motuma Kaba
11,960 Points
Motuma Kaba
Motuma Kaba
11,960 Points

it seems complicated but its just asking you to add " .main-nav, " to the one you did on the first question. which is ( .main-nav li{ display: inline-block; ).

so the final answer looks like this. /******** .main-nav, .main-nav li{ display: inline-block; } **********/

Faiz hamdan
Faiz hamdan
1,648 Points
Faiz hamdan
Faiz hamdan
1,648 Points

Here's the right answer to the question.

''' .main-nav{ margin: auto; display: inline-block; } '''

Leanne Millar
Leanne Millar
9,555 Points

My understanding of it is:

The .main-nav is the class id for the navigation.

The li is the list item which in this instance is the individual navigation links.

So basically in the first instance, you are targeting the list item specifically.

In the second instance, you are selecting the navigation as a whole.

Hope this helps and explains things a little clearer.

Adriano Gomes
Adriano Gomes
5,468 Points
Adriano Gomes
Adriano Gomes
5,468 Points

I was able to solve it with the following code:

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

Midhun Chandran
Midhun Chandran
9,414 Points
Midhun Chandran
Midhun Chandran
9,414 Points

This worked for me, .main-nav li{ display: inline-block; } .main-nav {display: inline-block}

Nicholas Murdock
Nicholas Murdock
2,115 Points
Nicholas Murdock
Nicholas Murdock
2,115 Points

They should redo this question. The wording is super confusing, I still don't fully think I understand what was trying to be taught.