title: bootstrap 3 navbar padding and items background
body: <p>I'm using bootstrap 3 to build a website. Could anyone please tell me how to remove the padding / margin for the menu items? It currently looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/yjVz3.png" alt="Bootstrap 3 navbar"></p>
  
  <p>And I would also like to have different link colors when hovering the items. My code is currently like this:</p>
  
  <pre><code>  &lt;!-- Start main navigation --&gt;
    &lt;nav class="navbar navbar-custom" role="navigation"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
        &lt;div class="navbar-header"&gt;
          &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
          &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
      &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Politica&lt;/a&gt;&lt;/li&gt;
          &lt;li class="headerDivider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Societate&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Economie&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Extern&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Stil de viata&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/nav&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar-custom {
      background-color:#303334;
      color:#ffffff;
  border-radius:0;
  margin-bottom: 0;
  }
  
  .navbar-custom .navbar-nav &gt; li &gt; a {
  color:#fff;
  padding-left:20px;
  padding-right:20px;
  }
  
  .navbar-custom .navbar-nav &gt; .active &gt; a, .navbar-nav &gt; .active &gt; a:hover, .navbar-nav &gt;      .active &gt; a:focus {
  color: #ffffff;
  background-color:transparent;
  }
  
  .navbar-custom .navbar-nav &gt; li &gt; a:hover, .nav &gt; li &gt; a:focus {
      text-decoration: none;
      background-color: #007faa;
  }
  
  .navbar-custom .navbar-brand {
  color:#eeeeee;
  }
  
  .navbar-custom .navbar-toggle {
  background-color:#eeeeee;
  }
  
  .navbar-custom .icon-bar {
  background-color:#007faa;
  }
  
  .navbar-nav {
  font: 400 1.3em 'Oswald', 'Arial Narrow', Arial, sans-serif;    
  text-transform: uppercase;
  }
  
  .fa-home {
  font-size: 1.2em;
  }
  
  .navbar-nav&gt;li {
  margin-right: 15px;
  }
  </code></pre>
  
  <p>Thank you.</p>