SharePoint Web Part Branding with CSS: Title/Header not lining up with Body

Question

I am attempting to brand a SharePoint web site, but I am running into an issue with a couple web parts when applying background colors to the web parts title area and body. When applying the background colors, the title and body areas aren't lining up properly (see linked image below). I am relatively new to CSS and SharePoint branding and I am sure that I am missing something obvious. Any help would be greatly appreciated to get this looking nice and clean around the edges.

Image: http://imageshack.us/photo/my-images/62/webpart.png/

Code being applied to said web part:

.RightZone .ms-WPHeader TD {
background: #6a7f10;
margin: 0;
padding: 0;
border: 1px #6a7f10 solid;
}
.RightZone .ms-WPBody 
{
 background-color:#e1e5cf;}

Any input on how to get the edges to line up would be greatly appreciated. Again, its probably a simple answer but I couldn't find it when I searched online.

Thanks!!

Answer 1

Try Doing This:

<table>
    <tr>
         <td class="ms-WPHeader"> This is Title </td>
    </tr>
     <tr>
         <td class="ms-WPBody "> This is body </td>
     </tr>
</table>

.ms-WPHeader {
    background: #6a7f10;
    margin: 0;
    padding: 0;
    border: 1px #6a7f10 solid;
 }
.ms-WPBody {
    background-color:#e1e5cf;

}

See: http://jsfiddle.net/rathoreahsan/WtWqX/10/