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 Vijayakumar Subramani
Vijayakumar Subramani
10,419 Points

The <ul> with the class main-nav is a block-level element by default, so it takes up the full width of its container. Le

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.

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

header {
  text-align: center;
}
.logo {
  width: 110px;
  margin: auto;
}
.main-nav li {
  display: inline-block;
}

.main-nav ul {
  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>

12 Answers

Marco Fregoso
Marco Fregoso
379 Points
Marco Fregoso
Marco Fregoso
379 Points

Right now you're doing this:

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

Which means; select all "ul" elements nested inside elements with the class "main-nav", but if you look closely there isn't any "ul" element nested inside an element with the class "main-nav", the class "main-nav" is actually on the "ul" element itself:

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

So instead, you should be doing this:

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

or even this:

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

Which means select all ul elements with a class "main-nav". Hope it makes sense.

EDIT: Just remember that when adding a space in css next to a previous selector you're actually selecting the elements' descendants

.nav-link a {
  font-size: bold;
}

The previous code selects all anchor elements nested inside all elements with the class .nav-link While the following actually selects all anchor elements with a "nav-link" class

a.nav-link {
  font-size: bold;
}
Anita Hai
Anita Hai
6,438 Points

Thanks Marco!

Mustafa Abrams
Mustafa Abrams
10,288 Points
Mustafa Abrams
Mustafa Abrams
10,288 Points

header { text-align: center; } .logo { width: 110px; margin: auto; } .main-nav { display: inline-block;

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

Asal Shamim
Asal Shamim
3,596 Points
Asal Shamim
Asal Shamim
3,596 Points

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

}

Amit Kumar Singh
Amit Kumar Singh
1,294 Points
Amit Kumar Singh
Amit Kumar Singh
1,294 Points

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

Kinjal Mehta
Kinjal Mehta
4,104 Points

thanks

Abigirl Mulilo
Abigirl Mulilo
2,677 Points
Abigirl Mulilo
Abigirl Mulilo
2,677 Points

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

Chloe Huling
Chloe Huling
5,778 Points
Chloe Huling
Chloe Huling
5,778 Points

^^^^ note the wording because mine was .main-list but this right here is the answer it's looking for.

Heba Hendy
Heba Hendy
7,786 Points
Heba Hendy
Heba Hendy
7,786 Points

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

mario mahilaj
mario mahilaj
4,437 Points
mario mahilaj
mario mahilaj
4,437 Points

Try to do .main-nav li, .main-nav { display: inline-block } it worked out for me

Robert Roberson
PLUS
Robert Roberson
Courses Plus Student 8,401 Points
Robert Roberson
Robert Roberson
Courses Plus Student 8,401 Points

Strangely. I have tried all the solutions here and none of them work.

Tyler Clarke
Tyler Clarke
2,902 Points

you might just need to change the main-nav li { display: inline-block; } ul.main-nav { display: inline-block; } to main-list li { display: inline-block; } ul.main-List { display: inline-block; } some of the questions change wording

Cheryl Chao
Cheryl Chao
5,555 Points

Me toooooo!!!!!!!! How ????!!!!!!!!!!!!

Kam Bains
Kam Bains
2,002 Points
Kam Bains
Kam Bains
2,002 Points

I have tried all the solutions too and none of them work.

Terfa Nomhwange
Terfa Nomhwange
6,568 Points
Terfa Nomhwange
Terfa Nomhwange
6,568 Points

There is something wrong with the Question. This teacher needs to review his work. hahahaha