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

Posted by mattgopow
mattgopow
1,456 Points

Text-align doesn't seem to be working for nav or footer

I'm watching "Resize Text" video in the "Customizing Colors and Fonts" section. When I try to center my nav and footer areas by typing "text-align: center;", nothing seems to happen. What am I doing wrong? Here's my CSS code below.

/*****************************************************
GENERAL
******************************************************/

body {
    font-family: 'Open Sans', sans-serif;
}

#wrapper {
   max-width: 940px;
   margin: 0 auto;
   padding: 0 5%
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}



/*****************************************************
HEADING
******************************************************/



#logo {
    text-align: center;
    margin: 0;
}

h1 {
    font-family: 'Changa One', sans-serif;
    margin: 15px 0;
    font-size: 1.75em;
    font-weight: normal;
    line-height: 0.8em;
}

h2 {
    font-size: 0.75em;
    margin: -5px 0 0;
    font-weight: normal;
}



*****************************************************
NAVIGATION
******************************************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}


*****************************************************
FOOTER
******************************************************/

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #ccc;
}



/*****************************************************
PORTFOLIO
******************************************************/

#gallery {
    margin: 0;
    padding: 0;
    list-style: none;
}

#gallery li {
    float: left;
    width: 45%;
    margin: 2.5%;
    background-color: #f5f5f5;
    color: #bdc3c7;
}



/*****************************************************
COLORS
******************************************************/

/* site body */
body {
    background-color: #fff;
    color: #999;
}


/* green header */
header {
    background: #6ab47b;
    border-color: #599a68;
}

/* nav background on mobile devices */
nav {
    background: #599a68;
}

/* logo text */
h1, h2 {
    color: #fff;
}

/* links */
a {
    color: #6ab47b;
}


/* nav links */
nav a, nav a:visited {
    color: #fff;
}


/* selected nav link color */
nav a.selected, nav a:hover {
    color: #32673f;
}

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points

The elements you are trying to center text within are only as wide as the content they contain (those are called inline elements). Examples are links (< a > tags), spans, buttons, and some other elements. In order to center text within those elements, you'd need to set an actual width to the elements. 

nav a {
   width:20%;
   text-align:center;
}
mattgopow
mattgopow
1,456 Points

Okay, I think I understand. I tried out the code you pasted and that seemed to do the trick.

I'm still a little confused as to how Nick got it to work with the same code I was previously using, though? (Link to video here: https://teamtreehouse.com/library/how-to-make-a-website/customizing-colors-and-fonts/resize-text)

Thanks for the speediest reply ever.

Jeff Lemay
Jeff Lemay
14,268 Points

It would depend on what your html looks like. Nick put all his nav links inside list items (inside an unordered list) and list items are block-level by default. Block elements (as opposed to inline or inline-block) take up 100% of the width of their parent element by default. So your text would center easily, but each nav link would be on its own line.

And you're very welcome!

mattgopow
mattgopow
1,456 Points

I believe my nav links are block-level as well? Here's the code for them.

<nav>
            <ul>
                <li><a href="index.html" class="selected">Portfolio</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
</nav>
Jeff Lemay
Jeff Lemay
14,268 Points 
*****************************************************
NAVIGATION
******************************************************/

nav {
    text-align: center;
    padding: 10px 0;
    margin: 20px 0 0;
}


*****************************************************
FOOTER
******************************************************/

footer {
    font-size: 0.75em;
    text-align: center;
    padding-top: 50px;
    color: #ccc;
}

Notice anything odd here?

Jeff Lemay
Jeff Lemay
14,268 Points

Eh, thought the syntax would highlight differently...

You are missing a slash before those comment blocks so the css you have here isn't even rendering.

mattgopow
mattgopow
1,456 Points

Wow. I feel incredibly dumb.

Thanks man, can't believe it was that simple of a mistake.