Center or justify my top navigation bar

Hi,

I’m new to this forum, and to WordPress. I have recently taken over managing a WordPress site at work (https://www.futureoflondon.org.uk/) and have a lot to learn on it.

I would like to center (or justify – but I think centering may be easier?) my top navigation bar. I think I have found the right part of my CSS file (“Nav Menu”) but I am not sure where in the code I should add/modify. I have read other posts on this topic but I can’t seem to get their solutions to work for me. The code is below. Any help would be great.

Thanks!

Jenn

[ Moderator Note: Please post code or markup snippets between backticks or use the code button. ]

/***** Nav Menu ********************/

#nav {
	clear: both;
	color: #000000;
	margin: 0 auto 0;
	padding: 0;
	}

#nav .wrap {
	background: #ffd503;
	width: 960px;
	height: 45px;
	margin: 0 auto 0;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-webkit-border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	}

#nav ul {
	width: 950px;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0 0 0 10px;
	}

#nav li {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	}

#nav li a {
	color: #000000;
	display: block;
	font-size: 14px;
    margin: 0;
	padding: 13px 17px 12px 5px;
	text-decoration: none;
	position: relative;

	}

#nav li a:hover, #nav li a:active {
	background: #ffd503;
	color: #999999;
	}

#nav li a.sf-with-ul {
	padding-right: 20px;
	}	

#nav li a .sf-sub-indicator {
	background: url(images/arrow-down.png);
	display: block;
	width: 10px;
	height: 10px;
	text-indent: -9999px;
	overflow: hidden;
	position: absolute;
	top: 19px;
	right: 5px;
	}

#nav li a:hover .sf-sub-indicator {
	background: url(images/arrow-down-hover.png);
	}

#nav li li a, #nav li li a:link, #nav li li a:visited {
	background: #ffd503;
	color: #000000;
	width: 138px;
	margin: 0;
	padding: 6px 10px 6px 10px;
	border-bottom: 1px dotted #CCCCCC;
	text-transform: none;
	position: relative;
	}

#nav li li a:hover, #nav li li a:active {
	background: #ffd503;
	color: #999999;
	}

#nav li li a .sf-sub-indicator, #nav li li a:hover .sf-sub-indicator {
	background: url(images/arrow-right.png);
	top: 10px;
	}

#nav li ul {
	z-index: 9999;
	position: absolute;
	left: -999em;
	height: auto;
	width: 160px;
	margin: 0;
	padding: 0;
	}

#nav li ul a {
	width: 140px;
	}

#nav li ul a:hover, #nav li ul a:active {
	}

#nav li ul ul {
	margin: -33px 0 0 158px;
	}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfHover ul ul, #nav li.sfHover ul ul ul {
	left: -999em;
	}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfHover ul, #nav li li.sfHover ul, #nav li li li.sfHover ul {
	left: auto;
	}

#nav li:hover, #nav li.sfHover {
	position: static;
	}

#nav li.right {
	float: right;
	margin: 0;
	padding: 13px 25px 12px 0;
	}

#nav li.right a {
	display: inline;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	color: #EEEEEE;
	font-weight: normal;
	text-decoration: none;
	}

#nav li.right a:hover {
	color: #EEEEEE;
	text-decoration: underline;
	text-shadow: #000000 1px 1px;
	}

#nav li.date {
	}

#nav li.rss a {
	background: url(images/rss.png) no-repeat left center;
	margin: 0 0 0 10px;
	padding: 3px 0 3px 18px;
	}

#nav li.search {
	padding: 0 10px 0 10px;
	}

#nav li.twitter a {
	background: url(images/twitter-nav.png) no-repeat left center;
	padding: 3px 0 1px 20px;
	}