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 Douglas Rojas
Douglas Rojas
4,104 Points

class

I have a problem with my class because doesn´t want to align the text to center. Here my code:

html:

<nav> <ul> <li><a href="Index.html" class="selected">Portfolio</a></li> <li><a href="About.html">Contact</a></li> <li><a href="Contact.html">About</a></li> </ul> </nav>

css:

nav a.selected, nav a:hover { text-align: center; }

J V
J V
4,471 Points 
nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

Instead of only selecting the nav SELECTED class and the nav HOVER, Try the above and just select all the nav items at the top of your page. I'm assuming we're on the same lesson. Mine worked fine.

6 Answers

J V
J V
4,471 Points

you have to take out

nav a.selected, nav a:hover {
text-align: center;

and add

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}
Douglas Rojas
Douglas Rojas
4,104 Points
Douglas Rojas
Douglas Rojas
4,104 Points

thank you for your help but it does not work.

this is the code.

In html:

            <ul>
           <li><a href="Index.html" class="selected">Portfolio</a></li>
           <li><a href="About.html">Contact</a></li> 
           <li><a href="Contact.html">About</a></li>
       </ul>

    </nav> ```



In Css:

 ```nav a.selected, nav a:hover {
text-align: center;
}```
J V
J V
4,471 Points
J V
J V
4,471 Points

at the top right of workspaces, click the snapshot workspace link. Then post the link to that snap shot here. I'll take a look at it.

Douglas Rojas
Douglas Rojas
4,104 Points
Douglas Rojas
Douglas Rojas
4,104 Points

https://w.trhou.se/hkgxfowji4

J V
J V
4,471 Points
J V
J V
4,471 Points

you wrote this..

nav a.selected, nav a:hover {
text-align: center;

Take out "text-align: center;"

Later on in the lesson, you will add more styling, resulting in this:

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

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

BASICALLY... it will work if you use the code I stated in the last comment, but you will get to it later in the lesson, anyway.

Douglas Rojas
Douglas Rojas
4,104 Points
Douglas Rojas
Douglas Rojas
4,104 Points

WOW!!!! You are killing it! Thank you so much.