text-align: center; not working

Question

I've recreated it in JSfiddle and still can't get it to work. What am I missing?

Here's the HTML

<div class="row">
<div class="6u 12u$(small)">    <span class="image fit"><img src="images/pic01.jpg" alt=""></span>

    <h2green class="h2green">HIDE IN PLAIN SIGHT</h2green>
    <p>Escape to the big city of your choice; top floor of the tallest skyscraper with a champagne bottle in the bucket filled with ice, this might be just what you need .</p>
</div>
<div class="6u$ 12u$(small)">   <span class="image fit"><img src="images/pic02.jpg" alt=""></span>

    <h2blue>ESCAPE TO THE COUNTRYSIDE</h2blue>
    <p>You deserve a relaxing break and a quality experience. We strive to make it that way by finding you the right property and making sure you receive the very best of service before and during your stay.</p>
</div>

Here's the CSS

h2green {
text-align: center;
font-family: Steelfish;
color: #80c342;
font-size: 3em;
}

h2blue {
text-align: center;
font-family: Steelfish;
color: #0080c6;
font-size: 3em;
}

All the text always aligns to the left and I need it centered.

https://jsfiddle.net/m19f35nb/

I just want all the H2s and Ps to center.

Answer 1

Here is HTML and CSS example code

 <h2 class="blue">ESCAPE TO THE COUNTRYSIDE</h2>
 <h2 class="green">ESCAPE TO THE COUNTRYSIDE</h2>

h2.green {text-align: center; font-family: Steelfish;color: #80c342;font-size: 3em;}

h2.blue { text-align: center; font-family: Steelfish; color: #0080c6; font-size: 3em; }