Anonymous space between two floated li elements - html

Question

I'm creating header of one aplication nad I found strange problem, which never happentd to me before. The problem is, that i have two list inside header, one floated to left, one to right and between all li elements there are two types of border. That's ok, but there's creating space between them out of nowhere? Or at least, I can't find what is creating the space
Can someone tell me where's space created?
Here is jsFiddle: jsFiddle link
Or direct-input:
HTML:
<header id="header">
<ul class="left">
<li class="title">jedna</li>
<li class="new-task">dva</li>
<li class="new-comment">NC</li>
</ul>
<ul class="right">
<li class="logged">jedna </li>
<li class="logout">dva</li>
</ul>
CSS:
header
{
position: relative;
top: 0px;
min-height: 35px;
padding: 0px;
margin: 0px;
background-color: #efefef;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbbbbb), to(#efefef));
background: -webkit-linear-gradient(top, #efefef, #bbbbbb);
background: -moz-linear-gradient(top, #efefef, #bbbbbb);
background: -ms-linear-gradient(top, #efefef, #bbbbbb);
background: -o-linear-gradient(top, #efefef, #bbbbbb);
}
header ul
{
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
}
header ul li
{
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
header ul li:first-of-type
{
border-left: none;
padding-left: 20px;
}
header ul li:last-of-type
{
border-right: none;
padding-right: 20px;
}
header ul.left
{
float: left;
}
header ul.right
{
float:right;
}
EDIT:
This space:

Answer 1

Your li's are set to display: inline, so your browser is putting a space between each li just like it would between words. You can counter this default behavior in a few ways. You can float instead of using display: inline, you can put all your li's on one line without spaces, or you can add a negative margin to pull the li's together. This article explains your options better than I could:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

Set ul li to float:left; and set the line-height to 25 instead of 35 in header ul

Answer 3

Adding the following CSS code fixed it for me:
header ul.left li {
display:block;
margin: 0;
float: left;
line-height: 25px;
}

Answer 4

This is being caused by the display: inline;.
What is happening is the white space between the lis is being considered as a character.
To prevent this add font-size: 0; to the parent ul and then add the font-size: 16px; to the lis.
header ul {
margin: 0px;
padding: 0px;
line-height: 35px;
list-style-type: none;
font-size: 0;
}
header ul li {
margin: 0px;
display: inline;
padding: 5px 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
font-size: 16px;
}
JSFIDDLE
Here is a good article on what options you can use.

Answer 5

Just add float: left; and reduce padding, here's a FIDDLE
header ul li {
display: inline;
float: left;
padding: 0 10px;
border-left: 1px solid #efefef;
border-right: 1px solid #bbbbbb;
}
*Note: Horizontal space with width of about 4px is always added on inline & inline-block elements and to fix that you must float them or write HTML code in line for that elements.