Centre Logo within Navigation CSS

Hello,
After some help!

I am trying to center my logo within the navigation – 3 links on either side of my image.

I am using the them: ample

The css coding for the nav menu is split in to two parts as you can see below in the header css.

.business-template #masthead {
background-color: #ffffff;
}
.main-head-wrap {
padding: 30px 0;
}
.header {
border-bottom: 1px solid #f2f2f2;
}
#header-left-section {
float: left;
margin-right: 25px;
}
#header-logo-image {
float: left;
padding: 5px 20px 5px 0;
max-width: 100%;
}
#header-logo-image img {
margin-bottom: 0px;
max-height: 60px;
}
#header-text {
float: left;
padding-right: 20px;
}
#site-title {
padding-bottom: 0;
}
#site-title a {
color: #666666;
font-size: 34px;
}
#site-title a:hover {
color: #80abc8;
}
#site-description {
line-height: 1.5;
font-size: 13px;
padding-bottom: 0;
color: #888888;
font-weight: 300;
margin-bottom: 0;
}
#header-right-section {
float: right;
position: relative;
}
img.header-image {
display: block;
margin: 0 auto;
}

Any help is really appreciated!!!

http://www.theardourcreative.com