Css居中而不影响每一边

Question

我有一个使用 Twitter Bootstrap 和 Rails 3.2 的简单导航栏

<header class="navbar navbar-fixed-top">
 <div class="navbar-inner">
 <div class="container">
  <%= link_to logo, root_path, :class=>"logo1" %>
  <nav>
  <ul class="nav pull-right">
   <% if signed_in? %>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li class="hova"><%= link_to "#" %></li>
    <li id="fat-menu" class="dropdown">
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i><b class="caret"></b>
     </a>

 </header>

截至目前， Logo 位于居中工具栏的左侧，链接和下拉插入符号位于右侧，两边没有间距。

我如何为两者添加一些填充/边距(将 Logo 向左移动约 5 像素，将右侧内容向右移动约 5 像素，因此我牺牲中心空白而不是移动内容。

例如，

.navbar .container {
 width: 960px;
 margin-left:10px;
 }

..适用于左侧。但是我怎样才能同时为权利实现同样的目标呢？抱歉，不是一个前端设计师。

谢谢。

Answer 1

将 Logo 放在一个 span 中

<span class="logo"><%= link_to logo, root_path, :class=>"logo1" %></span>

然后使用 CSS 作为 -

.logo{
    margin: 0 0 0 -5px;
}

.dropdown{
    margin: 0 -5px 0 0;
}