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 Kirstine Nichols
Kirstine Nichols
13,592 Points

Aligning links

I want to align navigation links that are in an un-ordered list, horizontally to the right hand side of the screen. I've tried setting them as classes to increase specificity but that doesn't seem to work. I think I may be targeting the wrong selector or using the wrong property (float/align-text?) for the inline-block element? Honestly, I have no clue. Can somebody help point out what I'm doing wrong so I can learn from this issue once and for all? Thanks so much! :)

<header>
    <nav>
        <ul>
            <li><a href="index.html" alt="Home" id="home">KC Nichols</a></li>
            <li><a href="portfolio.html" alt="portfolio" class="mainnav">Portfolio</a></li>
            <li><a href="blog.html" alt="blog" class="mainnav">Blog</a></li>
            <li><a href="about.html" alt="about" class="mainnav">About</a></li>
            <li><a href="contact.html" alt="contact" class="mainnav">Contact</a></li>
        </ul>
    </nav>
</header>

CSS: header { background-color: #ffff46; border: solid 5px #ffe746; color: #fff; font-family: serif; height: 30%; width: 100%; margin: -14px 14px 0 -14px; padding: .30%;}

nav ul { display: none; margin: 0 10px; padding: 0; display: inline-block; }

nav ul li a { text-decoration: none; display: inline-block; height: 100%; }

2 Answers

Juan Jose Cortes Guzman
Juan Jose Cortes Guzman
7,894 Points

Hi Kirstine, I review your css, there are a few problems, here is the code. I assume you want the navigation links aligned to the right.

header { 
  background-color: #ffff46; 
  border: solid 5px #ffe746; 
  color: #fff; 
  font-family: serif; 
  height: 30%; 
  width: 100%; 
  margin: -14px 14px 0 -14px; 
  padding: .30%;}


nav ul { 
  /*display: none;  Remove this declaration, unless you want to hide the navigation*/
  margin: 0 10px; 
  padding: 0; 
  /*display: inline-block; Remove this declaration, the default value is good*/
}

nav ul li /* a remove the a, the target should be the li element, not the anchor */ {
  float: right; /* Add a float right*/
  text-decoration: none; 
  display: inline-block; 
  height: 100%; 
}

You may need to adjust the margins and padding for the header element in order to look good, and style the anchor elements in another declaration, but check firsts if this code fix your problem.

Ryan Gordon
Ryan Gordon
1,340 Points
Ryan Gordon
Ryan Gordon
1,340 Points

Depending on what you mean by aligning this might work. i'm thinking, do you want the right hand side of the words to align on the right of the screen or do you want the first letters to align, but float to the right of the screen?

nav,
.mainnav{
    float:right;
}

If you remove the .mainnav here it will float the list to the right, but keep the list aligned by first letter.

http://jsfiddle.net/ZVXpL/