How do I center the Zurb Foundation top bar nav?

Question

The top bar nav on my site is left aligned like this:

| Home | aveoTSD | Silent Nite          |

I would like to center the top bar nav like this:

|          Home | aveoTSD | Silent Nite          |

Center it exactly like the red bar with "Example" text.

Here is my css.

Answer 1

You can do it by adding this to your CSS (and preferably removing conflicting styles):

.top-bar-section ul {display: table; margin: 0 auto;}
.top-bar-section ul li {display: table-cell;}

Answer 2

Found this to be helpful: https://github.com/zurb/foundation/issues/1598

Set the container of the navigation to: text-align:center;

Then for the navigation itself, set the display to: display:inline-block;

Hope that helps!