title: how to set a font size and padding percentage to be equal each boxes?
body: <p>I did some research with font size and boxes sizes. I created ul li and styling them with some CSS to make them looks like a table and stay inline. after the epic code i realize that each words are different like home, tutorial, contact us, and registration. all font have a different sizes and different paddings to use.</p>
  
  <p>so this is my code...
  i tidy this up so it's not looks like in my localhost. what i did was made the percentage like 3.5754% to set the padding to get the exact SAME width of the boxes. so 4 of them should be the same size of boxes.</p>
  
  <p>at home i created padding like 5% or so.
  at tutorial i created padding like 3.something%
  and etc.</p>
  
  <p>because each words has a different width and number of letters.</p>
  
  <p>sorry for my English, please let me know if i'm confusing u guys..
  but please help about this percentage and font thing. i really don't get it. if u guys have some article to read it's also help... because i'm still looking for it. ty guys :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  .navigation {
    top: 0;
    width: 90%;
    height: 120px;
    background: #ccc;
    margin: 0 auto;
    text-align: center;
  }
  .nav-head {
    padding-top: 5%;
    padding-left: 0;
    width: 100%;
    margin:
    /*0 7.2%*/
    ;
  }
  .nav a {
    color: #e74c3c;
    text-decoration: none;
    font-size: 1em;
  }
  .nav {
    list-style: none;
    display: inline;
    border: solid 1px #e74c3c;
    margin-left: 0;
  }
  #nav1 {
    padding: 1% 1%;
  }
  #nav2 {
    padding: 1% 5.74%;
  }
  #nav3 {
    padding: 1% 3%;
  }
  #nav4 {
    padding: 1% 3%;
  }
  .nav:hover {
    padding: 2.2% 5%;
    border: solid 1px #e74c3c;
  }
  .nav.currentpage {
    padding: 2.2% 5%;
    border: solid 1px #e74c3c;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav class="navigation"&gt;
    &lt;ul class="nav-head"&gt;
      &lt;li class="nav" id="nav1"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav" id="nav2"&gt;&lt;a href="#"&gt;REGISTRATION&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav" id="nav3"&gt;&lt;a href="#"&gt;TUTORIAL&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="nav" id="nav4"&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>