How To Center Top Navigation Buttons

I am looking to center the contents of my top navigation bar on my page.

I have tried numerous settings in the Navigation and Top Navigation parts but I cant get it to work out.

My website is https://www.srpcoatings.com

Here is what I am seeing:

/*============================ TOP NAVIGATION ============================*/
#topnavi {
float: right;
margin: 5px 15px;
font-family: Arial, Tahoma, Verdana;
}
#topnav, #topnav ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
}
#topnav li{
float:left;
position:relative;
}
#topnav a{
display: block;
padding: 10px 15px;
font-size: 1.0em;
font-weight: bold;
text-decoration: none;
color: #333;
}
#topnav a:link, #topnav a:visited{
text-decoration: none;
}
#topnav a:hover{
color: #fff;
background: #c41010;
}
#topnav ul {
position: absolute;
display: none;
z-index: 99;
background: #c41010;
padding: 5px;
}
#topnav ul a {
width: 180px;
padding: 10px;
margin: 0;
float: left;
color: #fff;
font-size: 0.9em;
border-top: none;
}
#topnav ul a:hover {
color: #333 !important;
background: #fff !important;
}
#topnav ul ul{
margin-top: 0;
border-left: 5px solid #fff;
}
#topnav li ul ul {
margin-left: 200px;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul{
display:none;
}
#topnav li:hover ul, #topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul{
display:block;
}
/*============================ NAVIGATION ============================*/
#navi {
float:left;
width: 890px;
margin-top: -2px;
padding: 0 5px;
background: #c41010;
font-family: Arial, Tahoma, Verdana;
}
#nav, #nav ul{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;

}
#nav li{
float:left;
position:relative;
}
#nav a{
display: block;
padding: 3px 15px;
margin: 7px 0;
font-size: 1.0em;
font-weight: bold;
text-decoration: none;
color: #fff;
border-right: 1px solid #fff;
}
#nav a:link, #nav a:visited{
text-decoration: none;
}
#nav a:hover{
color: #c41010;
background: #eee;
}
#nav ul {
position: absolute;
display: none;
z-index: 99;
border-top: 1px solid #ccc;
}
#nav ul a {
width: 180px;
padding: 10px;
margin: 0;
float: center;
color: #333;
font-size: 0.9em;
background: #fff;
border-top: none;
border-left: 2px solid #aaa;
border-right: 1px solid #bbb;
border-bottom: 1px solid #ccc;
}
#nav ul a:hover {
color: #444 !important;
background: #e0e0e0;
}
#nav ul ul{
margin-top: -1px;
padding-left: 2px;
}
#nav li ul ul {
margin-left: 200px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}