How can I center these menu items with CSS?

site: http://ift.tt/2nFeAOV

Hi, learning web developer student here. I am trying to center the menu items in the main menu to make it look more attractive, but I can't figure out how to do it with CSS! I've tried different floats, aligns, etc, but to no avail! The only thing I was able to do was to get it centered using a left margin on the first menu item, but when the site is viewed on mobile, the buttons are then too far to the right to be visible at all because of the margin.

I also want to make the text on the buttons look larger, but when I do that using CSS, for some reason it removes the last button from view on the menu (it completely disappears) when the page is loaded. But only when the page is loaded. Strange!

Any help would be appreciated if you could point me in the right direction. :)