Just working on an email template and have encountered a problem with borders.

Here is the section of the template that's affected:

strange.jpg

Firstly directly below the short fat white border (with no gaps) I want a 1px white border running all the way to the right-hand edge of the page.

As you can see for some reason there is a problem with this.

Here is the CSS:

Code:
.didyouknow {
	background-color: #4896de;	
	margin: 10px;	
	padding: 10px;
	color: #ffffff;
}

.didyouknow h2 {
	color: #ffffff;
	margin: 0;
	padding: 0;
	font-size:	22px;
	padding-bottom: 5px;
	border-bottom: 6px solid #ffffff;
	width: 175px;
}

.didyouknow hr {
	margin: 0;
	padding: 0;
	border-top: 1px solid #ffffff;
	margin-bottom: 5px;
}

Here is the HTML

Code:
<div class="didyouknow">
<h2>Did you know?</h2><hr> Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

</div>

I want the same think to happen with the two blue borders at the bottom. The fat one for some reason appears sunken, and the thin blue one is experiencing the same issue as the thin white one mentioned earlier.

Again here is the CSS

Code:
td .decoration hr {
		padding: 0;
		margin: 0;
		border-bottom: 6px solid #4896de;
		margin-left: 10px;
		width: 175px;
}

td .decoration {
		padding: 0;
		margin: 0;
		}


td .footer hr{
		padding: 0;
		margin: 0;
		border-top: 1px solid #4896de;
		margin-left: 10px;

}
And the HTML

Code:
 <tr>
    	<td class="decoration">
    		<hr>
    	</td>
    </tr>
    
    <tr>
    	<td class="footer">
        	<hr>
    		<p><span class="contact">Contact Telephone Numbers:</span> #<br>
            <span class="contact">email:</span> #            </p>
    	</td>
    </tr>
Can anyone help with this?