Centering Menu Options and Retaining Mobile Header?

I’m trying to figure out how the text for the Menu items can be centered? Mine seem to be hard justified left, I tried adding this code to the custom CSS but it seemed to have no effect (other than changing the size of the menu area, everything was still pushed left):

#top-navigation {width:800px;height:45px;float:none !important;margin:0 auto;}
#main-navigation {width:800px;height:45px;float:none !important;margin:0 auto;}
#siteinfo {width:100%;float:left;text-align:center;}
#siteinfo img {float:none !important;}

Also, I was wondering if there’s any way to retain the header image in the Mobile code? I tried deleting all of the Mobile css code but my header image still did not appear (I’ve since added the mobile css back). I’ve set the header through Appearance>Header with Custom Header Overlay enabled (the header does appear when Custom Header is not enabled, but then it shrinks the header image a bit for some reason with a lot of white space around it that makes my theme look bad on desktop).

This is my site: https://www.wackywarfare.com

Thanks!