Togglable Tabs上的文本和行之间的奇数内部空间 - Bootstrap

Question

我遇到了一个很难用语言表达的问题。我让this fiddle尝试表达问题所在。

在那里，您会注意到：文本[Home, Profile, Messages, Settings]和 他们的bottom-border灰色真的很远。

我注意到，如果我转到代码的这一部分（第31行）并删除float: left，问题就会解决，但是布局的行为将与我预期的不同（2个部分对齐） 。

.user-left{
    width: 196px;
    float: left; /* This is at line 31 on Fiddle */
}

有人能指出我为何会发生这种情况的方向吗？