title: How to stop text from overlapping CSS?
body: <p>Im creating a website for college and Im not sure how to stop text from overlapping when I make the web browser smaller. This is what I mean:</p>
  
  <p>(not overlapping)
  <img src="https://i.stack.imgur.com/RgrdV.png" alt="t"></p>
  
  <p>(overlapping)
  <img src="https://i.stack.imgur.com/lhl1L.png" alt="tt"></p>
  
  <p>Here is my jsfiddle: (<a href="http://jsfiddle.net/RC4Ar/" rel="nofollow noreferrer">http://jsfiddle.net/RC4Ar/</a>)</p>
  
  <pre><code>.words {
  font-family:apple;
  font-size:20px;
  max-width:800px;
  height:190px;
  margin-top:10px;
  margin-left:42%;
  }
  </code></pre>
  
  <p>Thanks in advance!</p>