Класс CSS не работает должным образом

У меня этот код в файле HTML

echo "<article class='room-full-width'>";
$room_query = mysql_query("SELECT * FROM roomdetails WHERE hotelname = '".$row['hotelname']."'");       
while($room=mysql_fetch_array($room_query)){
    echo "<span class='room-details'>";
    echo "<span class='room-name'>";
    echo $room['roomtype'];
    echo "</span>";
    echo "<a class='gradient-button' title='Book now' href='hotel.html'>Book now</a>";
    echo "</span>";
}
echo "</article>";

И я добавляю следующий стиль в файле.css:

.room-full-width{
    float: left;
    margin-bottom: 2%;
    margin-top: -2%;
    width: 100%;
}

.room-full-width .room-details{
    background-color: -moz-buttonhoverface;
    float: left;
    padding: 1% 2% 0;
    width: 90%;
}

.room-full-width .room-details .room-name{
    color: #333333;
    font-size: 1.6em;
    font-weight: bolder;
    max-width: 30%;
    overflow: visible;
    width:29%;
}

.room-full-width .room-details .gradient-button{
    bottom: 5px;
    float: right;
    position: relative;
    right: 20px;
}

Но этот класс.room-full-width совсем не работает, если я тестирую его с помощью firebug, он даже не показывает этот класс, но другие классы, такие как .room-details и .room-name и .gradient-button все работают хорошо.

Но родительский класс вообще не показан в Firebug.

Я использую последнюю версию Firefox - она поддерживает HTML5 и CSS3.