title: adding margin to css causes some unwanted behavior
body: <p>I wrote following html page</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
  &lt;title&gt;Jenware | Personalized Gifts&lt;/title&gt;
  &lt;style type="text/css"&gt;
  
  
  /* styles for navigation */
  #nav {
      background-color: #2322ff;
      height: 3em;
  }
  #nav ul {
      list-style:none;
      margin: 0 auto;     
          width: 19.5em; 
  } 
  #nav ul li {
      font-weight: normal;
          text-transform: uppercase;
          float:left;
  
  }
  
   #nav ul li a {     
    display: block;   
    padding: .5em;    
    border: 1px solid #ba89a8; 
    border-radius: .5em;  
    margin: .25em; 
  }    
  
  
  
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="nav"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=""&gt;House&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;Baby&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;More&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
  &lt;!-- end #content --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the output is followin<img src="https://i.stack.imgur.com/tlrw6.png" alt="enter image description here">g</p>
  
  <p>I made a small change in the section </p>
  
  <pre><code> #nav ul li a {     
    display: block;   
    padding: .5em;    
    border: 1px solid #ba89a8; 
    border-radius: .5em;  
    margin: .5em; 
  }    
  </code></pre>
  
  <p>changed the margin from .25em to .5 em and now it appears as following</p>
  
  <p><img src="https://i.stack.imgur.com/WNxoE.png" alt="enter image description here">
  If you see the about thing has come out, I am not clear as what thing has caused this behaviour, just by changing margin how can this happen?</p>
  
  <p>as per suggestions below I tried changing 
   if I remove the width column, and   in case I remove the float:left column then all the boxes are vertical
  i.e.if I do </p>
  
  <pre><code>#nav ul {
      list-style:none;
      margin: 0 auto;     
  
  } 
  #nav ul li {
      font-weight: normal;
          text-transform: uppercase;
  
  }
  </code></pre>
  
  <p>it comes as following
  <img src="https://i.stack.imgur.com/LrEjs.png" alt="enter image description here"></p>
  
  <p>why is this happening</p>