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;}