title: list background not changing in CSS in hover
body: <p>hover on first element of list changes the whole background to some other colour. but hover other element except first changes background also but some portion of background is left  unchanged there as you can see in picture.  </p>
  
  <p><img src="https://i.stack.imgur.com/94Gnm.png" alt="enter image description here"></p>
  
  <p><b>HTML:</b></p>
  
  <pre><code>&lt;div id="add_friend"&gt;
      &lt;ul id="frnd_bar_2"&gt;
          &lt;li&gt;Add To Friends&lt;/li&gt;
          &lt;li&gt;About&lt;/li&gt;
          &lt;li&gt;Photos&lt;/li&gt;
          &lt;li&gt;Friends&lt;/li&gt;        
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><b>CSS:</b></p>
  
  <pre><code>#frnd_bar_2{
        position:relative;
        list-style: none;
        text-decoration: none;
        display: inline-block;
        border: 1px solid grey;
        border-left: 2px solid grey;
        margin: 0px;
        padding: 0px;
  }
  #frnd_bar_2 li{
       cursor:pointer;
       list-style: none;
       text-decoration: none;
       display: inline-block;
       border-right: 2px solid grey;
       text-align:center;
       margin: 0px auto;
       padding: 5px;
       padding-left: 30px;
       padding-right: 30px;
       font: 20px sans-serif ;
  }
  #frnd_bar_2 li:hover {
       background: #aaa;
       margin: 0px auto;
  }
  #add_friend{
      float:left;
      height:auto;
      background:#efefef;
      margin: 0px;
      padding: 0px;
  }   
  </code></pre>
  
  <p>is there any problem in the code?</p>