Moving main.nav

Hi there,

on my site https://www.cuckooavenue.com , I am trying to move my main.nav into the middle of the page. I think it will be presented better that way. So this what I think I should be adjusting

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

.main-nav { font-family: ‘Lato’, Helvetica, Arial, sans-serif; font-weight: 900; text-transform: uppercase; }
.main-nav li { float: left; position: relative; }
.main-nav li a { display: block; color: #b3b3b3; font-size: 18px; font-size: 1.125rem; line-height: 1; letter-spacing: 2.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; }

When I changed the position from “left” to “center” it puts the titles on top of each other on the left side. But not in the middle of the page. I think Im missing something pretty simple.As im sure you can tell im new at this, any ideas would be greatly appreciated. Thanks!