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

HTML How to Make a Website Adding Pages to a Website Style New Pages

Mason Embry
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Mason Embry
Full Stack JavaScript Techdegree Graduate 31,420 Points
Posted by Mason Embry
.a{fill-rule:evenodd;}techdegree seal-36
Mason Embry
Full Stack JavaScript Techdegree Graduate 31,420 Points

Nav not centered like video

As you can see here, my nav elements are not quite centered, as it shows in the video. I'm not sure why that is.

http://web-i7jqrqdd0c.treehouse-app.com/about.html

It's the same on my portfolio page as well. Any ideas?

Mason

4 Answers

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

It looks like it is due to a 40px left padding added to all ul elements through normalize css. If you apply a padding of 0 to that nav ul element it should correct your issue.

Mason Embry
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Mason Embry
Full Stack JavaScript Techdegree Graduate 31,420 Points
Mason Embry
.a{fill-rule:evenodd;}techdegree seal-36
Mason Embry
Full Stack JavaScript Techdegree Graduate 31,420 Points

You're right! I was able to fix it in my main.css by removing padding from my nav ul elements. But how could I fix it in the actual normalize.css?

Mason Embry
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Mason Embry
Full Stack JavaScript Techdegree Graduate 31,420 Points
Mason Embry
.a{fill-rule:evenodd;}techdegree seal-36
Mason Embry
Full Stack JavaScript Techdegree Graduate 31,420 Points

Is the answer in here somewhere? I'm just using this as a learning exercise now.

/* ==========================================================================
   Lists
   ========================================================================== */

/**
 * Address margins set differently in IE 6/7.
 */

dl,
menu,
ol,
ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

/**
 * Correct list images handled incorrectly in IE 7.
 */

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}

Thanks!

Mason

Keith Kelly
Keith Kelly
21,326 Points
Keith Kelly
Keith Kelly
21,326 Points

Yes. It is this bit of code that is affecting the nav:

/**
 * Address paddings set differently in IE 6/7.
 */

menu,
ol,
ul {
    padding: 0 0 0 40px;
}

The reason this code is in the normalize file is because browsers handle the indentation differently. Most browsers use left padding, however Internet Explorer 6 and 7 use left margin.

Remember the normalize css is attempting to make all browsers consistent. If you would rather remove any default styling and apply your own you can start with a css reset instead. The Eric Meyers reset is a popular option.