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 Avery Pierce
Avery Pierce
1,869 Points

Can anyone help me horizontal align my nav bar?

I have not been able to get it to display any other way then vertically.

<style>

nav {
    background-color: black;
    height: 50px; 
    text-align: center;


}

 nav ul {

    height: 50px;
    width: 50px;
    text-align: center;
 }

 nav ul li {

    display: inline-block;
    list-style-type: none;
    width: 50px;
    float: left;
    border: 1px solid ; 
    text-align: center;
    padding:10px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
         }

2 Answers

Dane Parchment
MOD
Dane Parchment
Treehouse Moderator 11,075 Points
Dane Parchment
Dane Parchment
Treehouse Moderator 11,075 Points

I believe the reason your li tags are only vertical is because your ul tag has a fixed width of 50px. Each of your li tags have a width of 50px as well. So they fill out the width and stack vertically. Try increasing the width of the ul to say 300px.

Avery Pierce
Avery Pierce
1,869 Points
Avery Pierce
Avery Pierce
1,869 Points

Thank you Sir, perfect answer. This has been racking my brains.!