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 Foundations The Box Model Width, Height and Overflow Properties

Posted by marie declercq
marie declercq
1,721 Points

Display the links in the nav as inline block elements.

Hello everyone, I don't understand why my code is not working.. THat doesn't seem to be difficult but... Bummer ! Here is my code

/* Complete the challenge by writing CSS below */

.nav { display: inline-block;

}

Thanks for your help :)

6 Answers

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

What you have is the nav with the display property of inline-block. However, you need to set the links inside of the nav, which would be the a elements as display: inline-block.

Paul Kirsch
Paul Kirsch
2,894 Points
Paul Kirsch
Paul Kirsch
2,894 Points

and written as:

nav a { display: inline-block; }

/* no "." after the "a" or the "nav" */ P

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

Well, you aren't naming it, you are selecting the "a" instead of the "nav". When it says to select the links within the nav, what this is saying is to look inside your nav element, and there will be links, which are the <a href=""></a> elements. To select these elements in CSS, the a is the tag, so this is what you use for the selector. If you set the nav to display: inline-block, it makes the nav element have the display of inline-block, not the links inside the nav. The nav is a container, and when you give the nav container property display: inline-block, you are telling the nav container to be an inline-block with the other elements around it, its "sibling" elements. However, the links (the a elements) are the nav element's "children", and so when these are set to display: inline-block, then each a tag is displayed in "inline-block" format with all of their "siblings", which are all of the other a elements as "children" of the nav element; with the nav element being the "parent" of each a element.

Does that make sense?

marie declercq
marie declercq
1,721 Points
marie declercq
marie declercq
1,721 Points

Okay thank you Adam for your quick answer. If I understood right, to set the link inside the "nav" I have to name it "a" ? why not "nav" ?

marie declercq
marie declercq
1,721 Points
marie declercq
marie declercq
1,721 Points

Ow okay, yeah I got the difference between those two "nav" and "a" now. Thank you Adam !

Adam Moore
Adam Moore
21,956 Points
Adam Moore
Adam Moore
21,956 Points

No problem! And don't worry, all of these new concepts and ideas will become second nature as you experiment and work with them more and more!

Alban JACQ
PLUS
Alban JACQ
Courses Plus Student 4,172 Points
Alban JACQ
Alban JACQ
Courses Plus Student 4,172 Points

Hi there, I have to agree with marie on that one, the title of the challenge isn't clear at all. Even with your explanations I have to roam my imagination ;-)

If it wasn't for the forum I would have banged my hand on the screen for the next couples of days :D

A.