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

WordPress

Lucas Santos
Lucas Santos
19,315 Points

WooCommerce Styling Problem Mystile

Hey does anyone know why it's difficult to style the css inside the woocommerce theme "Mystile". I am using a correct child theme and what not as well as using bootstrap 3.0 on the site. Now what im trying to do is center the navigation from the right to the center and it's not letting me. Iv used firebug and inspected the element and grabbed the correct element and gave it a red border just to see fi it's working and it did but for some reason I cannot center the menu for the life of me. This is how I called it and the code I used to try and center the Mystile theme Menu:

ul#main-nav.nav.fl.parent {
border: 4px solid red;
margin:auto;
text-align:center;
float:none;
}

1 Answer

Matt Campbell
Matt Campbell
9,767 Points

Have you got a link to the demo site?

Margin auto more than likely won't center anything.

What you'll need to do is give the ul a width and then give each li a width of 100% and then text-align:center that. Text-align aligns text in relation to the size of the element the text is in so if there's no width, the element with text will just be the width of the text.

http://www.w3schools.com/cssref/pr_text_text-align.asp