title: Text not aligning with large font-size
body: <p>I'm building a periodic table in HTMl/CSS and I cant get the text inside the large <code>.element-symbol</code> to align left with the <code>.atomic-weight</code>, <code>.element-name</code> and <code>.atomic-symbol</code> without an arbitrary <code>text-indent</code>. I guess this is just to do with the width of the letters, but is there a way of having the first letter in <code>.element-symbol</code> start hard left? i.e against the red border</p>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="cell"&gt;
    &lt;div class="atomic-number"&gt;&lt;span&gt;2&lt;/span&gt;&lt;/div&gt;
    &lt;div class="element-symbol"&gt;      
      &lt;abbr&gt;He&lt;/abbr&gt;
    &lt;/div&gt;
    &lt;div class="element-name"&gt;&lt;span&gt;Helium&lt;/span&gt;&lt;/div&gt;
    &lt;div class="atomic-weight"&gt;4.002602&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>CSS: (red borders to show alignment issue)</p>
  
  <pre><code>* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    line-height: 1;
    }
  
  .cell {
    border: 1px solid black;
    font-family: sans-serif;
    width: 280px;
    height: 280px;
    margin: 20px auto;
    padding:10px;
    background-color: #4DBCE9;
    }
  
  .element-symbol {
   font-size: 173px;
   border: 1px solid red;
   font-weight: 400;
   /*text-indent: -12px;  dont want to use this*/
   }
  
  .atomic-number, .atomic-weight, .element-name {
   font-size: 25px;
   border: 1px solid red;
   }
  </code></pre>
  
  <p><a href="http://codepen.io/andrewcowley/pen/AfpjJ" rel="nofollow">Example in codepen</a></p>