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 layeesolo
layeesolo
7,316 Points

Centering my navigation evenly

Hello, How are we all doing today? I am having a little trouble with my navigation and I was wondering if anyone can please look my code and tell me what I am doing wrong. I am trying to center my navigation in the middle evenly. Here is my code and thank you.

http://codepen.io/AbeLayee/pen/ZYjqLK

clairecampbell2
clairecampbell2
12,907 Points

Hi layeesolo,

The reason why your navigation is not in the middle is due to the list items floating to the left. I've made a couple of small changes to your css, and your navigation items are now centered.

.main-nav{
           list-style: none;
           padding:0;
           margin:0;
           text-align: center; <!-- Center the list items  -->
}
.main-nav li {
                  <!-- Remove the float: left;  -->
                  min-width:8em;
                  text-align:center;
                  margin-left:14px;
                  padding:10px;
                  display: inline-block; <!-- Display your items inline-block  -->
}

Hope this helps :)

layeesolo
layeesolo
7,316 Points

thank you very much is now working the way i wanted it to be.

clairecampbell2
clairecampbell2
12,907 Points

No worries! :)

Marco Morales
Marco Morales
6,833 Points

Hey there. I took a look at your pen and thought of a couple of things you could try.

1) Add text-align center to .main-nav (looks like you figured this one out) 2) Set a width on .main-nav less than its parent and set the margin to auto (this will distribute the remaining space left and right)

Option 1 is cleaner as option 2 will require updating the width later when you change your menu items.

1 Answer

Marco Morales
Marco Morales
6,833 Points
Marco Morales
Marco Morales
6,833 Points

Or, if you want to explore flex properties:

.main-nav { display: flex; justify-content: center; }

layeesolo
layeesolo
7,316 Points

alright, thank you very helpful