Help me! Moving my Main nav bar

Hi there, please help me
my site is https://www.cuckooavenue.com
Im trying to move my main navigation into the center of the page. Everything time I changed it from left to center, it stacks them ontop of each other. But I want them in a straight line next to one another.

/***** Navigation *****/

.main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: center; position: relative; text-align: center; }
.main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 1.7px; padding: 12px 0; margin-right: 50px; }
.main-nav li a:hover { color: #000; }
.main-nav ul li a, .main-nav ul .current-menu-item:hover > a { border-bottom: 2px solid #fff; }
.main-nav ul .current-menu-item > a { border-bottom: 2px solid red; color: #000; }
.main-nav ul ul li a, .main-nav ul ul .current-menu-item:hover > a, .main-nav ul ul .current-menu-item > a { border: none; }
.main-nav ul li:hover > ul { display: block; background: #fff; z-index: 9999; }
.main-nav ul ul { display: none; position: absolute; left: -20px; }
.main-nav ul ul li { padding: 0 20px; width: 13rem; background: #f6f6f6; }
.main-nav ul ul ul { left: 100%; top: 0; }
.tinynav { display: none; }

Here is the code. Please help me out, much appreciated!