title: Navigation text within circle list-item doesn't shrink fluidly. Instead text starts sticking out.
body: <p>I rounded my nav list-items and have centered the link text inside of them. However, when I shrink the browser window, as I am trying to create a fluid website, the circle re-sizes while the text does not re-size proportionally along with it. </p>
  
  <p>I thought this had something to do with the padding or width values of either the li a or the li. However, I have tried adjusting fixed values to percent values, yet, the problem still persists.</p>
  
  <p>Below is the HTML</p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li class="circle"&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li class="circle"&gt;&lt;a href="coding.html"&gt;Coding&lt;/a&gt;&lt;/li&gt;
          &lt;li class="circle"&gt;&lt;a href="health.html"&gt;Health&lt;/a&gt;&lt;/li&gt;
          &lt;li class="circle"&gt;&lt;a href="contact.html"&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Below is the CSS</p>
  
  <pre><code>nav {
      text-align: center;
      padding: 0 0;
      margin: 10px 0 0;
  }
  
  nav ul {
      list-style: none;
      margin: 0; 10px;
      padding: 0;
  }
  
  nav li {
      display: inline-block;
      font-size: 0.8em;
    margin: 50px;
    padding: 2%;
    border: 1px solid black;
  }
  
  nav a {
    padding: 3em;
  }
  
  .circle {
      position: relative;
      width: 1px;
      height: 1px;
      border-radius: 50%;
      line-height: 1px;
      text-align: center;
  }
  
  .circle a {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
  }
  </code></pre>