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

Andrew Thomas
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrew Thomas
Front End Web Development Techdegree Student 14,698 Points
Posted by Andrew Thomas
.a{fill-rule:evenodd;}techdegree
Andrew Thomas
Front End Web Development Techdegree Student 14,698 Points

Why does the unordered list take up a full line even when I give it a display of 'inline-block'?

When I wrote my code for centering the navigation inside the header during this workshop, I targeted the unordered list and gave it a display of inline-block. I also gave the header a text-align of center.

header {
  text-align: center;
}

ul {
  display: inline-block;
}

The blue navigation background extended all the way across the page. However, I noticed in the solution video when Guil targeted the navigation instead of the unordered list, the blue background only applies to the actual list items and does not extend across the whole page.

Just curious as to why this happens?

2 Answers

tomaszfurmanczyk
.a{fill-rule:evenodd;}techdegree
tomaszfurmanczyk
Full Stack JavaScript Techdegree Student 18,242 Points

Straight forward explanation: nav and ul are block level elements you need to point to it's parent to a inline-block which in this particular case is the nav element.

nav { display: inline-block; }

Leandro Botella Penalva
Leandro Botella Penalva
17,618 Points
Leandro Botella Penalva
Leandro Botella Penalva
17,618 Points

Hi Andrew,

Nav element is a block level element which occupies the total width of its parent, the header. The background color is applied to the nav so if you target the ul element and set it to display: inline-block, then what you are doing is set the ul element, which is another block level element, occupy what it needs according to its content, so it will no longer have a width of the entire parent's width. And with the text-align: center you are centering respectively to the nav element. At this point the nav still use the full width, that's why still exists the blue background color.

However, targeting the nav element and setting its display value to inline-block you are making it use the amount of width it needs for its content so it will no longer use the entire width, and will be centered respectively its parent, the header.