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

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

Hey Stu,

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

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

:)

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

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

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.

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

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

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

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

FINALLY worked for me

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

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.

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

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

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

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; } **********/

Here's the right answer to the question.

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

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

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

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

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