title: Why there's a space between these tabs?
body: <p>I tried to make tabs using CSS3 and got the following result:
  <img src="https://i.stack.imgur.com/ZVOpR.jpg" alt="enter image description here"></p>
  
  <p>With the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;style type="text/css"&gt;
  nav{
      width:1000px;
      padding-top:30px;
      margin:0 auto 0 auto;
  }
  nav ul.topnav{
      margin:0;
      padding:0;
      width:100%;
      position:relative;
  }
  nav ul.topnav li{
      display:inline-block;
      width:173px;
      height:18px;
      padding:10px;
      font-size:15px;
      margin:0;
      box-shadow:inset 0 0 5px 5px #E7E4E9;
      border:1px solid #8C8293;
      border-radius:15px;
      border-bottom-left-radius:0;
      border-bottom-right-radius:0;
      color:#666666;
      text-align:center;
  }
  &lt;/style&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;nav&gt;
  &lt;ul class="topnav"&gt;
  &lt;li&gt;Overview&lt;/li&gt;
  &lt;li&gt;Alarms&lt;/li&gt;
  &lt;li class="selected"&gt;Config&lt;/li&gt;
  &lt;li&gt;Logs&lt;/li&gt;
  &lt;li&gt;Command Line&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How can I remove that space between the tabs (as shown in the image)?
  PS. It seems to be a trailing space because at the end of the list I have this space as well.</p>