I am trying to create a shaded column heading, and can't get this working?!

Why is it that when I make .graybar 100% it extends beyond the #thankyou container and that when I set it to 580px it has a larger gap on the right side? (5px + 580px + 5px = 590px?!)

Code HTML4Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 
<head>
	<title>Thank You</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
 
		body{
			background: #FFF;
			font-family: Helvetica, Arial, Sans-Serif;
			line-height: 1.4em;
			font-size: 0.9em;
		}
 
		h2{
			padding: 87px 1em 0 20px;
			font-size: 1.2em;
			text-align: left;
		}
 
		p{
			padding: 0.5em 20px;
			font-size: 0.9em;
		}
 
		#thankyou{
			z-index: 0;																/* Place below other elements */
			width: 590px;
			margin: 10px auto;
			padding: 5px;
			border: 1px solid #444;
		}
 
		.graybar{
			/* consider merging with .colhead */
			width: 580px;
/*			width: 100%; /**/
			height: 20px;
/*			padding: 0.3em 0em; /**/
			text-align: left;
			line-height: 1.4em;
			font-size: 1em;
			font-weight: bold;
			color: #FFF;
			background-color: #AAA;
		}
 
	</style>
</head>
 
<body>
	<div id="thankyou">
		<h2>Thank you for your order!</h2>
		<hr>
		<p>Be sure to print this page as a receipt!!</p>
		<div class="graybar">Order Information</div>
	</div>
</body>
</html>

Thanks,



Debbie