Unable to center menu w/o breaking drop down

I am trying to center the top menu, and I followed the help they listed on the site but when I am on a mobile version (you can see by resizing the browser) the drop down menu is broken and I have no clue how to fix this. Any suggestions?

https://thewordonwealth.net/gcpa/

This is what I added to center the menu:

.menu {
        text-align:center
    }
    .menu li {
        display:inline-block;
        float:none;
        margin-left: -5px;
    }
    .menu li li {
        display:block;
        text-align:left
    }