Center WordPress Top Menu

Hello, I am having difficulties in centering the wordpress menu of the website https://www.finefruit.co . I tried several solutions posted in this forum (text-align: center; padding: left; margin: auto) none worked.

The style.css referring to the top menu is:

/*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

#container { text-align: left; margin: 0 auto; width: 960px; position: relative; box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); -moz-box-shadow:0px 0px 6px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1); background-color: #ffffff;  }
	#header { position: relative; padding:30px 35px 3px; }
		#logo { float: left; }
		p#slogan { float: left; font-size: 13.5px; color: #66929c; text-transform: uppercase; padding-top: 27px; margin-left: -159px; }
		ul#top-menu { display:block; padding-top: 30px; clear:both; padding:30px 0px 0px 0px !important; margin:0px !important;
		overflow:hidden;
		}
		#additional-info { position:absolute; top: 15px; right: 1px; }
			#et-social-icons { float: left; padding-top: 9px; padding-right: 20px; }
				#et-social-icons  a { padding-left: 3px; }

and for the drop-down menu is:

/*------------------------------------------------*/
/*---------------[DROPDOWN MENU]------------------*/
/*------------------------------------------------*/

ul#top-menu li { padding: 0px 9px; }
	ul#top-menu a { font-size: 15px; font-family: 'Kreon', Arial, sans-serif; color: #393939; text-decoration: none; text-transform: uppercase; font-weight: lighter; }
	ul#top-menu a:hover, ul#top-menu > li.sfHover > a { color: #427d8b;}
	ul#top-menu > li.current_page_item > a { color: #427d8b !important; font-weight: normal; }

ul#top-menu ul { width: 189px; background: #fff; border: 1px solid #efefef; top: 34px !important; padding: 10px 8px 10px 20px; z-index: 9999px; display: none; -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); }
	ul#top-menu ul li { padding: 8px 0; }
		ul#top-menu ul li a { padding: 0px 0px 0px 12px; width: 160px; }

		ul#top-menu li:hover ul ul, ul#top-menu li.sfHover ul ul { top: -12px !important; left: 197px !important; }

Any advice is welcome! ??