title: how to make a navigation 100% width within an header wrapper
body: <p>I'm trying to make a navigation bar with 100% width, that distributes equally within a header that also has a width of 100%. Also each <code>a</code> element has two words each, that are perfectlly center aligned under each other.</p>
  
  <p>The HTML I'm working with is below:</p>
  
  <pre><code>&lt;div class="nav"&gt;
    &lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-family:sacramento; text-align: center;"&gt;Our&lt;/span&gt;&lt;br&gt; HOME&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-family:sacramento;text-align: center;"&gt;About&lt;/span&gt;&lt;br&gt; US&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-family:sacramento;text-align: center;"&gt;Client&lt;/span&gt;&lt;br&gt; WORKS&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-family:sacramento;text-align: center;"&gt;Contact&lt;/span&gt;&lt;br&gt; US&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-family:sacramento;text-align: center;"&gt;Our&lt;/span&gt;&lt;br&gt; VISION&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#"&gt;&lt;span style="font-family:sacramento;text-align: center;"&gt;Our&lt;/span&gt;&lt;br&gt; BIOS&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/div&gt;&lt;!--end of nav--&gt;
  </code></pre>
  
  <p>CSS I'm working with</p>
  
  <pre><code>.nav {
  position: relative;
  width: 100%;
  text-align: center;
   }
   .nav ul {
  margin: 0;
  padding: 0;
   }
   .nav li {
  margin: 25px 80px 10px 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  text-align: center;
   }
   .nav a {
  padding: 3px 12px;
  text-decoration: none;
  color: #999;
  line-height: 100%;
  font-family: actor;
  font-size: 20px;
  width: 10px;
  
     }
  </code></pre>
  
  <p>The example I'm trying to make looks like this below :</p>
  
  <p><img src="https://i.stack.imgur.com/m2LCd.png" alt=""></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>When I try the code in IE9, I get this image :</p>
  
  <p><img src="https://i.stack.imgur.com/iOJs4.png" alt=""></p>
  
  <p>Please how can i solve this.</p>