Aligning Main Navigation Product Categories

I’m using the storefront theme with wordpress, and for the life of me, I can’t align the menu items text into the center.

Here is the code I’ve used so far:

.main-navigation ul {
   line-height: 7;

.main-navigation ul li {
  border-right: 1px solid #ff63b1;
  padding-right: 30px;

.main-navigation ul.nav-menu li a {
   padding: 1em 1em;

I used the line: text-align: center; with all these but no difference.

Its worth noting, that I used product categories instead of normal menu items here as I found it more useful. Website: if you want to check the code for the main navigation

Here what it looks like so far: Screenshot here

Im banging my head against the wall and can’t figure this out. Any help would be great.

Read more here: Aligning Main Navigation Product Categories

Leave a Reply

Your email address will not be published. Required fields are marked *