title: Why does my font-size not change relative to the screen size?
body: <p>I am using <code>font-size: 4em;</code> which I understood to be a relative size? But when I change the size of my window, my font size does not change. It stays the same and starts to overlap and look ugly. The text I am referring to is "Test Title"</p>
  
  <p>Here is what it looks like full screen(2560x1440),I am happy with it
  <a href="https://i.stack.imgur.com/lFUOE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lFUOE.png" alt="enter image description here"></a></p>
  
  <p>But this is what it looks like half screen
  <a href="https://i.stack.imgur.com/h4750.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h4750.png" alt="enter image description here"></a></p>
  
  <p>And it looks even worse on mobile.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>h1, h2, h3, p {
   color: #39382e;
  }
  
  .left h1 {
    margin-top: 90px;
    color: gray;
    font-size: 4em;
    text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
   }
   
   .left h2 {
    color: gray;
    font-size: 1em;
    margin-top: -50px;
    font-weight: lighter;
   }
  
  div.left {
    width: 20%;
    display: inline-block;
    overflow: auto;
   } 
   #upperleft, #lowerleft {
    min-height: 360px;
    max-height: 361px;
    max-width: 551px;
    border: 1px solid white;
    border-radius: 5px;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="left"&gt;
     &lt;div id="upperleft"&gt;
      &lt;h1&gt;Web Design&lt;/h1&gt;
      &lt;h2&gt;Put your business online for the world to see&lt;/h2&gt;
      &lt;a href="#" class="learnmore"&gt;
       &lt;div&gt;Learn More&lt;/div&gt;
      &lt;/a&gt;
     &lt;/div&gt;
     &lt;div id="lowerleft"&gt;
      &lt;h1&gt;Contact us&lt;/h1&gt;
      &lt;h2&gt;Get a quote or ask us a question today&lt;/h2&gt;
      &lt;a href="#" class="learnmore"&gt;
       &lt;div&gt;Learn More&lt;/div&gt;
      &lt;/a&gt;
     &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>