Custom CSS not working

Take a look at this page on a site I am mocking up.

I have css in general staying which seems pretty much to only effect the color. There’s some css which auto generates.

.ref2{
font-weight: bolder;
text-align: center;
color: red;
font-size: 2em;
}

.ref1{
font-weight: bolder;
text-align: center;
color: black;
font-size: 2em;
}

on page:

<span class=”ref2″><span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span>a</span>
<span class=”ref1″>a</span>

what I typed in was
<span class=”ref2″>a</span>
<span class=”ref1″>a</span>

What’s the “bookmark” css that defaults into the css?
and why is text align and weights not working?

Very confused must be a setting or something causing this?

ON a new page it auto fills in this css again:
<span data-mce-type=”bookmark” style=”display: inline-block; width: 0px; overflow: hidden; line-height: 0;” class=”mce_SELRES_start”></span>

This is on a temporary url at siteground, will migrate when finished to a permanent url

Thanks so much, just don’t know what t make of this issue.