title: Add a separator between buttons in a menu bar (HTML/CSS)
body: <p>I'm making a mobile website and having some difficulty with making a few changes to my menu bar. I'm not an expert on this field so your help would be greatly appreciated.</p>
  
  <p>Below is the codes to the menu bar. </p>
  
  <p>CSS</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      * { padding: 0; margin: 3; }
      body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
      ul { list-style: none; }
      ul li {
  float: left;
  padding: 1.5px;
  position: relative;
  margin: auto;}
  ul a { display: table-cell; vertical-align: middle; width: 75%; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
      ul a:hover {background-color:#5A87B4; }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt; 
  &lt;ul&gt;
  &lt;li&gt;
    &lt;div align="center"&gt;&lt;a href="../Software.html" &gt;Software&lt;/a&gt;
      &lt;/div&gt;
  &lt;/li&gt;
    &lt;li&gt;
      &lt;div align="center"&gt;&lt;a href="../Products.html"&gt;Products&lt;/a&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;li&gt;
  &lt;a href="../Order Online.html"&gt;FAQ&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>This is a basic menu bar and i want to adjust this to the center and also have horozontal lines to break each button apart while all this is centered and fits a 100% on a mobile screen. All your help is greatly appreciated</p>
  
  <p>EDIT: Its like having some space after each button but instead theres a horizontal line</p>
  
  <p>EDIT: Changed the width from 75% to 80px. Note that i also changed the div ID of my code because i was having some other problems with identification. :) Hope this wont confuse you</p>
  
  <pre><code>#menubar * { padding: 0; margin: 2; }
      body { padding: 5px; font-family: Helvetica, Arial, sans-serif; width:95%; font-size:12px}
  
  #menubar ul{text-align:center;}
  
  #menubar ul li { display:inline-block; padding: 2px;  position: relative;  }
  
  #menubar ul a { display: table-cell; vertical-align: middle; width: 80px; height: 50px; text-align:center; background: #FFF; color:#000; border-style: solid; border-width:2px; border-color:#1570a6; text-decoration: none; }
  </code></pre>