title: Texts overlap problem
body: <p>I have three links on my page:</p>
  
  <pre><code>&lt;a class="contact" href="../contact.html" target="_blank"&gt;Contact&lt;/a&gt; 
  &lt;a class="car" href="../car.html" target="_blank"&gt;Car&lt;/a&gt; 
  &lt;a class="market" href="../market.html" target="_blank"&gt;Market&lt;/a&gt; 
  </code></pre>
  
  <p>I CSS them as below:</p>
  
  <pre><code>a.car{
    font-size: small;
    text-decoration: none;
    position: absolute;
    left: 20%;
    right: 10%;
    margin-top:10px;
  }
  
  a.market{
    font-size: small;
    text-decoration: none;
    position: absolute;
    left: 20%;
    margin-top:10px;
  
  
  
  }
  </code></pre>
  
  <p>As the browser window size changing smaller, the three link texts get <strong>overlaped</strong> at some point, how to resolve this? I mean how to make the link texts not overlapping when browser window size get smaller?</p>