Twitter Bootstrap 3.0.3 Navbar Aligning Navbar Header - css

Question

I'm having difficulty to centering my navbar brand logo.
currently, my logo will align far to the left.
what I want actually to align it center from the first link. Kindly find below for the sample :
Please find below my code at JSFiddle
http://jsfiddle.net/QSa8v/3/
<div id="navbar">
<nav role="navigation" class="navbar-custom">
<div class="navbar-header">
<button data-toggle="collapse" data-target="#ren-nav-collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar" />
<span class="icon-bar" />
<span class="icon-bar" />
</button>
<a href="#" class="navbar-brand">
<img src="http://i.imgur.com/CMEnIo7.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="ren-nav-collapse">
<ul class="nav navbar-nav">
<li>
LINK 1
</li>
<li>
LINK 2
</li>
<li>
LINK 3
</li>
<li>
LINK 4
</li>
<li>
LINK 5
</li>
<li>
LINK 6
</li>
</ul>
</div>
</nav>
</div>
Really need your kind answer.

Answer 1

Look at here : http://jsfiddle.net/QSa8v/4/
HTML changes :
<div id="navbar">
<nav role="navigation" class="navbar-custom">
<div class="navbar-header col-xs-3 myheader"> // CHANGE HERE
<button data-toggle="collapse" data-target="#ren-nav-collapse" class="navbar-toggle">
<span class="sr-only">
Toggle navigation
</span>
<span class="icon-bar" />
<span class="icon-bar" />
<span class="icon-bar" />
</button>
<a href="#" class="navbar-brand mybrand"> // CHANGE HERE
<img src="http://i.imgur.com/CMEnIo7.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="ren-nav-collapse">
<ul class="nav navbar-nav mybar"> // CHANGE HERE
<li>
LINK 1
</li>
<li>
LINK 2
</li>
<li>
LINK 3
</li>
<li>
LINK 4
</li>
<li>
LINK 5
</li>
<li>
LINK 6
</li>
</ul>
</div>
</nav>
</div>
CSS added :
.mybar {
margin-left:0px !important;
}
.mybrand{
float:none !important;
}
.myheader{
text-align: center;
padding: 1em;
}