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 Joey Tus
Joey Tus
3,737 Points

Help with nav bar links aligned to the right

Can't properly align nav bar links to the right side

Here is my code:

.main-nav a { margin-top: 20px; padding: 5px 5px; display: inline-block; }

1 Answer

adefee
adefee
4,705 Points
adefee
adefee
4,705 Points

You have the display property set to 'inline-block' - which means the <a> element will be displayed inline with other elements. You would either need to set "text-align: right" on the parent element, .main-nav, or set the display property on the <a> element to 'block' and give it a full width.

Also, as best practice, you normally would use an unordered list (<ul>) for a list of links. I took a second to throw together a CodePen demo for you. Look in the HTML window and you'll see each link or string is surrounded by an <li> (list item) container. By default, <li> elements (unless modified by their parents) have a text-align: left property set, so you need to explicitly set the text-align property to "right" (like I did with the ".right" class).

So, using the tiny bit of code you have, we could make all of your links align right by having:

.main-nav {
    text-align: right;
}
.main-nav a {
 // Blah blah blah
}