CSS change text color without line break

On my page I have a line of text. I want one word to be a different color. So I added a new css rule and applied it to the word, but now the text is creating a new line. It looks like this:

Edit content for the
<blue text> Why Join </blue text>
page.

and I want it to look like this:
Edit content for the  <blue text> Why Join </blue text> page.

Below is my CSS and HTML, can someone tell me how to get all of this on one line with the blue text? Thanks.

My page is here: http://www.glowfishtw.com/play3on3/admin_whyjoin_update.aspx

CSS
.admin_page_title {
      font-weight: bold;
      color: #0CF;
}
.admin_content_middle {
      background-image: url(../images/admin_bg_middle.png);
      background-repeat: repeat-y;
      width: 905px;
      padding-top: 5px;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-left: 45px;
      text-align: center;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 24px;
      color: #333;
}

HTML
  <div class="admin_content_middle">Edit content for the
    <div class="admin_page_title">Why Join</div>
page.</div>