Problem with Wordpress' div class="Post", "Entry" and "postmetadata" - class

Question

Im having trouble with my codes in wordpress. You can see my problem in the link below:
http://i1204.photobucket.com/albums/bb409/bendaggers/help-1.png
as you can see, i'm having trouble sticking them all together
the CSS codes are here:
.post{
padding: 10px 0 0 0px;
background-image: url(images/toppost.png);
background-repeat:no-repeat;
}
.entry{
background-image:url(images/ContentBG.png);
margin: 0 0 0 0;
padding:0 0 0 0;
background-position: bottom;
}
.postmetadata {
clear: both;
background-image: url(images/post-footer.png);
background-repeat:no-repeat;
height:118px;
}
the php codes are here:
<div id="container">
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><?php the_title(); ?> </h2>
</div>
<div class="entry">
<?php the_content(); ?></div>
<p class="postmetadata">
<?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br />
<?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?>
</p>
<?php endwhile; ?>
can you help me with my problem? its taking me so looong to solve this one coz im still a newbie in wordpress.
thanks in advance.

Answer 1

You need to add padding to your classes:
.post{
padding: 10px 5px 0 5px;
background-image: url(images/toppost.png);
background-repeat:no-repeat;
}
.entry{
background-image:url(images/ContentBG.png);
margin: 0 0 0 0;
padding:0 5px;
background-position: bottom;
}
.postmetadata {
clear: both;
background-image: url(images/post-footer.png);
background-repeat:no-repeat;
height:118px;
padding:0 5px;
}