Paginas lado a lado

Amigos,

Estou aprendendo a mexer no WORDPRESS e me deparei com um problema…

Gostaria de colocar três paginas (não são posts) lado a lado dentro da index.php como destaque. Consegui puxar as paginas usando POST_TYPE que achei a sintaxe na net… Mas não sei o que deu que elas ficam uma embaixo da outra e não do lado… Poderiam me ajudar???

site para ver o erro:

index.php

<div id="destaques">
<div id="paginas-destaque">
<?php $dest = array (
'post_type' => 'page',
'post__in' => array(139, 141, 147));
query_posts($dest); ?>
<?php if (have_posts()): while (have_posts()) : the_post();?>
<h1><a href="<?php the_Permalink()?>" title="<?php the_title();?>" alt="<?php the_title();?>"><?php the_title();?></a></h1>
<img src="<?=bloginfo('template_url')?>/images/img-box.jpg">
<p><?php the_excerpt();?></p>
<h2>[<a href="#">+ DETALHES</a>]</h2>
<?php endwhile; else:?>
<?php endif;?>
</div>
</div>

style.css

#destaques{
   width:900px;
   height: 300px;
   float: left;
}
#paginas-destaque{
   width:284px;
   height:270px;
   margin: 10px 0 0 15px;
}
#paginas-destaque h1 {
   height:35px;
   text-align:center;
   text-align:left;
   font-family: "montserratregular";
   color:#CA278C;
   font-size:20px;
   margin:5px 0 0 0;
}
#paginas-destaque h1 a {
   color:#CA278C;
   text-decoration: none;
}
#paginas-destaque h1 a:hover {
   color:#CA278C;
   text-decoration: underline;
}
#paginas-destaque img{
   width:284px;
   height:109px;
}

#paginas-destaque p{
   height:80px;
   text-align:left;
   color:#000;
   font-size:12px;
}
#paginas-destaque h2{
   height:40px;
   float:right;
   color:#000;
   font-size:12px;
}
#paginas-destaque h2 a{
   color:#000;
   text-decoration: none;
}
#paginas-destaque h2 a:hover{
   color:#000;
   text-decoration: underline;
}