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 Alexandre Perron
Alexandre Perron
4,410 Points

Centering nav item CSS

Hello! I want to make a navigation list in the center of the screen for my mobile site. It centers, but it is slightly to the right. Here is my code, thanks in advance!

nav { text-align: center; }

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

nav ul li { padding: 10px; margin: 5px; }

nav a { color: white; display: block; }

nav a:visited { color: white; }

2 Answers

Abe Layee
Abe Layee
8,378 Points

Hi Alexandre Perron, I normally center my nav element by targeting the ul element and using the text-align property. I created a sample for you. I hope this helps you out.

 <nav id="main-nav">
               <ul>
                   <li><a href="#index.html">Home</a></li>
                    <li><a href="#porftolio">Portfolio</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
               </ul>
           </nav>

#main-nav {
    padding:0;
    background:#222;
    width:100%;

}

#main-nav ul {
     text-align:center; // this will center you nav in the center of the page.  Feel free to use left or right
}

#main-nav ul li {
      list-style:none;
      display:inline-block; // this aligns the ul li side by side.
      margin:10px 10px; // this for 10px up/down and 10px for left/right



}

#main-nav ul li a {
       text-decoration:none;// hide  the underline
        color:crimson; // text color of the nav is crimson

}
Alexandre Perron
Alexandre Perron
4,410 Points

Thank you so much!

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

You're welcome.