Bootstrap navbar center with two lists - twitter-bootstrap-3

Question

How do you get a bootstrap navbar ul to be centered, but ignore the space occupied by another ul, so that the center is truly centered, and not shifted?
I have two unordered lists in my bootstrap navbar. I want one of them (#clause) to be centered, and the other (#social-icons) to be on the right.
But what happens is the centered one is slightly to the left of absolute center because the one on the right takes up some of the space.
Thus the centering is calculated based on the remaining space, rather than the entire width
Here is my code so far:
Currently, I have the right-aligned list within the other list. They should be two separate lists. But when I separate them, I run into the problem of each of them wanting their own rows.
I am using bootstrap 3
css
#navbar {
#clause {
text-align: center;
li {
font-size: 1.6em;
float: none;
display: inline-block;
*display: inline;
*zoom:1;
vertical-align: top;
}
}
#social-icons {
}
}
navbar HTML
<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-tabs" id="clause">
<li></li>
<li></li>
<li></li>
<ul class="nav navbar-right" id="social-icons">
<li></li>
<li></li>
</ul>
</ul>
</div>
</div>
</div>
</nav>

Answer 1

If you want to ignore the space occupied by the list #social-icons make its position absolute.
Doing so will give the whole width to #clause
CSS
#social-icons {
position: absolute;
right:0;
top:0;
}