Проблемма с DIVами

В общем подгоняю дизайн и возникла проблемма.

Мне надо прописать название сайта таким образом, чтобы одно слово было одного цвета, остальные другого цвета. Вот что я сделал:

<div id="header">
                     <!--the blog title-->
        <h4>XXX</h4><h2>XXXXXXXXXXXXXXXXXX</h2>
<!--blog description-->
                  <h3><?php bloginfo('description'); ?></h3>
</div>

Вот участок CSS

#header { 
    height: 135px; 
    padding: 83px 0px 0px 25px;
    background: url(images/header.gif) top center no-repeat;
    margin-bottom: 10px; 
    }
#header h2 {
    color: #ffffff;
    font-size: 20px;
    font-family: Bookman Old Style, Arial, Sans-Serif;
    margin: 0px;
    }
#header h4 {
    color: #6699FF;
    font-size: 20px;
    font-family: Bookman Old Style, Arial, Sans-Serif;
    margin: 0px;
    }

#header h2 a {
    color: #ffffff;
    text-decoration: none;
    }

#header h2 a:hover {
    color: #000000;
    text-decoration: none;
    }

#header h3 {
    color: #cccccc;
    font-size: 10px;
    font-family: Georgia, Times New Roman, Sans-Serif;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0px;
    }

Проблемма в том, что слово которое между <h4></h4> отбражается на одной строчке, а между <h2></h2> на следующей. Возможно так и должно быть по правилам HTML, но мне нужно чтобы на одной строчке. Как исправить?