title: Css button positioning without space between the buttons
body: <p>I want to position my navigation inline, but without space between the buttons. You can suggest some tip how to position them in the middle of the page as well. I have tried with <code>margin:0, padding-left:0px</code> but there are still space between them. Here is the html code:</p>
  
  <pre><code>&lt;div id="nav"&gt;
  &lt;nav role="navigation"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="./" class="button" title="Go to the home page"&lt;/title&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about.php" class="button"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contact.php" class="button"&gt;Contact&lt;/a&gt;&lt;/li&gt;    
  &lt;/ul&gt;&lt;/nav&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>And CSS style:</strong></p>
  
  <pre><code>.button{ 
   color: rgb(0, 0, 0);
   font-size: 15px;
  padding: 11px;
     text-shadow: 0px 2px 2px rgba(144,150,150,0.75);
    background: rgb(255, 255, 248);
    background: -moz-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
    background: -webkit-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
   background: -o-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
   background: -ms-linear-gradient(90deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
   background: linear-gradient(0deg, rgb(255, 255, 248) 69%, rgb(56, 2, 137) 92%);
  -webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.73);
  -moz-box-shadow:    0px 2px 1px rgba(50, 50, 50, 0.73);
   box-shadow:         0px 2px 1px rgba(50, 50, 50, 0.73);
    }
   #nav li{
   display:inline;
   }
  
   #nav ul{
   list-style-type:none;
   margin:0;
    }
   #nav ul li a{text-decoration:none;
  font:Tahoma, Helvetica, Arial, sans-serif;
  letter-spacing:0.1em;
  
   }
  </code></pre>