title: Text overlaps when resizing browser
body: <p>I found this nice header <strong>></strong> <a href="https://codepen.io/rm/pen/ldhon" rel="nofollow noreferrer">https://codepen.io/rm/pen/ldhon</a> <strong>&lt;</strong> but when I'm resizing window, the text overlaps. In this demo you must resize the window too much, but the problem is when font- size is bigger or if there is more text in menu then it will be overlapsed faster than in this demo.</p>
  
  <hr>
  
  <h2>HTML:</h2>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul&gt;
      &lt;li class="one"&gt;&lt;a href="#"&gt;Uno&lt;/a&gt;&lt;/li&gt;&lt;!--
   --&gt;&lt;li class="two"&gt;&lt;a href="#"&gt;Dos&lt;/a&gt;&lt;/li&gt;&lt;!--
   --&gt;&lt;li class="three"&gt;&lt;a href="#"&gt;Tres&lt;/a&gt;&lt;/li&gt;&lt;!--
   --&gt;&lt;li class="four"&gt;&lt;a href="#"&gt;Quatro&lt;/a&gt;&lt;/li&gt;
      &lt;hr /&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <h2>CSS:</h2>
  
  <pre><code>* {
    box-sizing: border-box;
  }
  
  body {
    font: 300 100% 'Helvetica Neue', Helvetica, Arial;
  }
  
  .container {
    width: 50%;
    margin: 0 auto;
  }
  
  ul li {
    display: inline;
    text-align: center;
  }
  
  a {
    display: inline-block;
    width: 25%;
    padding: .75rem 0;
    margin: 0;
    text-decoration: none;
    color: #333;
  }
  
  .two:hover ~ hr {
    margin-left: 25%;
  }
  
  .three:hover ~ hr {
    margin-left: 50%;
  }
  
  .four:hover ~ hr {
    margin-left: 75%;
  }
  
  hr {
    height: .25rem;
    width: 25%;
    margin: 0;
    background: tomato;
    border: none;
    transition: .3s ease-in-out;
  }
  </code></pre>
  
  <hr>
  
  <p>Can someone help me with this please?</p>