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

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

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

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

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

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

}

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

thanks

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

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.

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

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

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

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

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

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

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