How to make a centered navbar HTML CSS - html

Question

I'm trying to create a navbar that has my page links centered in the middle with a logo aligned to the left side and another link aligned to the right side. With my current setup, what would I have to do to create that?
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav {
list-style-type: none;
height: 40px;
padding: 0;
margin: 0;
}
#trans-nav li {
float: left;
position: relative;
padding: 0;
line-height: 40px;
background: #666 url(nav-bg.png) repeat-x 0 0;
}
#trans-nav li:hover {
background-position: 0 -40px;
}
#trans-nav li a {
display: block;
padding: 0 15px;
color: #fff;
text-decoration: none;
}
#trans-nav li a:hover {
color: #0F0
}
#trans-nav li ul {
opacity: 0;
position: absolute;
left: 0;
width: 8em;
background: #63867f;
list-style-type: none;
padding: 0;
margin: 0;
}
#trans-nav li:hover ul {
opacity: 1;
}
#trans-nav li ul li {
float: none;
position: static;
height: 0;
line-height: 0;
background: none;
}
#trans-nav li:hover ul li {
height: 30px;
line-height: 30px;
}
#trans-nav li ul li a {
background: #666
}
#trans-nav li ul li a:hover {
background: #666
}
#trans-nav {
background-color: #666;
}
<ul id="trans-nav">
<li>Home
</li>
<li>About
</li>
<li>Products
<ul>
<li>Widgets
</li>
<li>Thingamabobs
</li>
<li>Doohickies
</li>
</ul>
</li>
<li>Contact
</li>
<li>Info
</li>
</ul>

Answer 1

I created a simple example of what you're looking for. Maybe take some pointers from it.
HTML
<header>
<div class="logo">
<span>Logo</span>
</div>
<nav class="nav">
<ul>
<li>Link One</li>
<li>Link Two</li>
<li>Link Three</li>
</ul>
</nav>
<div class="other">
Link
</div>
</header>
CSS
header {}
a {
color: #FFF;
}
.logo,
.nav,
.other {
float: left;
min-height: 50px;
color: #FFF;
}
.logo {
width: 25%;
background: #333;
}
.logo span {
display: inline-block;
padding: 1em;
}
.nav {
width: 50%;
background: #666;
}
.nav ul {
margin: 0;
padding: 0;
}
.nav ul li {
display: inline-block;
padding: 1em;
}
.other {
width: 25%;
background: #999;
}
.other a {
display: inline-block;
padding: 1em;
}
#media (max-width: 640px) {
.logo, .nav, .other {
clear: both;
width: 100%;
}
.nav ul li {
display: block;
}
}
JSFiddle example