Add margin to inline-block element independently - html

Question

I want to apply an amount of space before an element in an unordered list. Here is the URL:http://hottdoggfilms.com. I try to centralize the dog's picture with logo in between the other list elements. But there is uneven space between the elements "Recent Work" and "About Us". My markup is:
<div id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<h1><a class="brand" id="cf" href="#"><img class="bottom" src="hottdogg.png" data-min-width-481="hottdogg.png" alt="Tipit"><img class="top" src="hottdogg.png" data-min-width-481="hottdoggHover.png" alt="Tipit"></a></h1>
<nav class="nav-collapse collapse" role="navigation">
<h2 class="visuallyhidden">Navigation</h2>
<ul class="nav">
<li class="active">Home</li>
<li>Recent work</li>
<li class="divider"></li>
<li style="margin-left:20px">About us</li>
<li>Contact us</li>
</ul>
</nav>
</div>
</div>
</div>
And the CSS:
#navbar .nav {
font-size: 0;
text-align: center;
white-space: nowrap;
float: none;
margin: 0;
}
#navbar .nav li {
display: inline-block;
float: none;
}
#navbar .nav a {
margin-bottom: 0;
font-size: 16px;
line-height: 37px;
height: 37px;
padding-left: 1.4em;
padding-right: 1.4em;
}
#navbar .divider {
width: 186px;
}

Answer 1

To me, the nav is quite confusing, with the divider and all.
Why not to go for a simpler solution?
http://codepen.io/anon/pen/IeLCf
nav {
margin:0 auto;
border:1px dashed black;
text-align:center;
}
nav a {
position:relative;
top:-100px;
display:inline-block;
vertical-align:middle;
padding:10px;
text-align:left;
}
<nav>
Home
LOOOOOOONG
<img src="http://hottdoggfilms.com/hottdoggHover.png" alt="" />
shrt
LOOONG
</nav>

Answer 2

Try to add width to #about-us' element 100px and lower the width of the .divider element to 145px.

Answer 3

I agree with the above answer, having the image as part of your navigation is a better solution.
However, if you want to keep what you have now, you can use the :nth-child selector.
http://www.w3schools.com/cssref/sel_nth-child.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child
in your case:
.nav > li:nth-child(3) {
margin-left: 60px; //as much as you need
}
//and for when the menu collapses
.nav > li:nth-child(3).small-screen {
margin-left: 0; //or whatever the default is
}