Выравнивание блока элементов по центру

Подскажите пожалуйста как мне выровнять блок с категориями https://yadi.sk/i/u1-b0bXx332nWw на сайте _dvapilota.com

Убедиться в том, что блок с категориями не по центру можно взглянув на его расположение относительно заголовка ниже.

Сейчас я весь блок с меню поместил вот в такой div:

Код:

<div class="navbar" style="position:relative; width:80%; height:100%; text-align:center; margin: auto; outline:0px solid blue">

Но меню вы выровнялось по горизонтали.

 

Доброго возможно срабатвает float попробуйте display: inline-block;float: none

 

Спасибо. Но теперь полеты указанные ниже "поехали" и стали отображаться в 3 ряда, а было в 4.

http://joxi.ru/ZrJdq1ku9QMY62

 

Незаметил сразу ссылку на сайт) в верхнем блоке:
ul.products li.product{ margin: 0 1.4% 1.618em !important;}
@media only screen and (min-width: 768px){
ul.products li.product.main {width: 13.86%;}
}