title: two divs inside a div do not look aligned correctly
body: <p>I have a container div and two divs inside it.</p>
  
  <p>I have tried to center align the contents of both divs but for some reason, the 2nd div looks incorrect in relation to the first div.</p>
  
  <p>First inner div aligned like this:</p>
  
  <pre><code>.main-text {
  position: absolute;
  text-align: center;
  color: red;
  top: 20%;
  width: 100%;
  letter-spacing: .6em;
  }
  </code></pre>
  
  <p>Second inner div aligned like this: </p>
  
  <pre><code>.down-arrow {
  text-align: center;
  width: 100%;
  }
  
  .bottom {
  color: white;
  position: absolute;
  top: 50%;
  font-size: 2em;
  }
  </code></pre>
  
  <p>Full code with demo of how the 2nd inner div with content "DWN" looks off: <a href="http://jsfiddle.net/qbmtap7t/" rel="nofollow">http://jsfiddle.net/qbmtap7t/</a></p>
  
  <p>Not sure what I have done wrong, thanks</p>