{Wordpress} Petits soucis de css/php

Bonjour! (oui encore moi, ne me huez pas,s'il vous plait)
Après quelques péripéties pour récupérer un thème wordpress et pouvoir le customiser via un thème enfant, je me retrouve face à de nouveaux problèmes:

1°)articles qui déborde du cadre
Tout est dans le titre, en plus une petite image pour que le problème soit bien clair:

Donc voilà...
En gros j'aimerais savoir pourquoi est-ce que mon article déborde du cadre.
Je vous mets le code html et css:

html:

<?php
get_header(); ?>
            <?php if(!is_category(5)){ ?>
    <div id="col21">
<?php } else { ?>
    <div id="wishlist">
<?php } ?>
                <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
<div class="entry">
            <div id="boxrond">
            <div id="post-<?php the_ID(); ?>">
                <div id="post-top"><h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Lien permanent vers <?php the_title(); ?>"><?php the_title(); ?></a></h2>
                <h4><?php the_time('j F Y'); ?> | <?php the_category(', ') ?> | <?php comments_popup_link('Aucun mot acidulé', '1 mot acidulé', '% mots acidulés'); ?></h4></div>
                <div id="article" class="post-content">
                    <?php the_content('Lire la suite »'); ?></div>
    </div></div></div>
        <?php endwhile; ?>
    <?php else : ?>
<div class="entry">
        <h2>Non Trouvé</h2>
        Désolé, mais vous recherchez quelque chose qui ne se trouve pas ici.
</div>
    <?php endif; ?> 
</div>
<?php
get_sidebar(); ?>
<?php get_footer(); ?>

css:

#col21{width:900px; margin-left:35px;}  
#boxrond {background: white;border: 2px solid #42A114;padding: 2px;-moz-border-radius: 10px;-webkit-border-radius: 10px;margin-top: 20px;}
#post-top{background:url(http://p3.storage.canalblog.com/39/03/1099925/88869660.gif) left no-repeat;margin-left: 10px;margin-top: 20px;}
#post-top h2{font-size: 25px;font-family: Bellota;margin-left: 20px;}
#post-top h2 a {text-decoration: none;color: #225A07;margin-left: 20px;}
#post-top h4 {margin-left: 30px;font-size: 12px;font-family: verdana;color: #666;}
#post-top h4 a {font-size: 12px;font-family: Verdana;text-decoration: none;color: #666;}
#article p{margin-top: 25px;font-family: verdana;font-size: 14px;margin-left: 5px;color: #666;}
#article{background:url(http://p4.storage.canalblog.com/41/97/1099925/90012342.jpg)right no-repeat;height:67px;margin:5px;}
.single .hentry {margin: 0;background:url(http://p3.storage.canalblog.com/39/03/1099925/88869660.gif) left no-repeat;}
#content .entry-title {color: #225A07;font-size: 25px;margin-left: 40px;font-family: bellota;font-style:normal;font-weight: normal;}
#post-top-single{margin-left:10px;margin-top:15px;}
#content h4{color: #666;font-size: 12px;font-family: verdana;margin-left: 30px;}
#post-top-single a {text-decoration: none;color: #666;font-size: 12px;font-family: verdana;}
.entry-content {
margin-top: 0px;
font-family: verdana;
font-size: 14px;
margin-left: 5px;
color: #666;
background: url(http://p4.storage.canalblog.com/41/97/1099925/90012342.jpg) right no-repeat;
height: 60px;
}

2°)(the last one)sidebar qui est en bas du listing d'article et à moitié rognée:

J'aimerais savoir pourquoi et comment faire pour la mettre à sa place, à côté du listing d'articles ET la rapprocher de ce dernier.

code html:

<div id="primary" class="widget-area" role="complementary">
            <ul class="xoxo">
            <div id="col22">
    <?php 
        if( is_category(2)|| (is_single() && in_category(2)) ){
        dynamic_sidebar('Sidebar illustrations');
        }
        if( is_category(3)|| (is_single() && in_category(3)) ){
        dynamic_sidebar('Sidebar Créations');
        }
        if( is_category(4)|| (is_single() && in_category(4)) ){
        dynamic_sidebar('Sidebar concours');
        }
 ?>
</div></div>

code css:

#col22{width:300px; margin-right:30px;}

Voilà en espérant avoir fournis toutes les informations nécessaires :)
Belle soirée!