I am trying to create a div within a div with a padding of 15px all around the inner box. For some reason there is more padding on the top and bottom of the box and I can not figure out why? Can anyone offer a suggestion?

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  
    <div class="headerbox">
      <p>sdfsdfsdf</p>
</div>
  
    
</div>
</body>
</html>
Code:
@charset "utf-8";
/* CSS Document */
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #828282;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.headerbox {
	background-color:#FFF;
	width: 970px;
	margin: 0px 0px 8px 0px;
}

.oneColFixCtrHdr #container {
	width: 970px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #e3e3e3;
	padding: 15px 15px 15px 15px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	box-shadow:0px 2px 10px #333333;
    -moz-box-shadow:0px 2px 10px #333333;
    -webkit-box-shadow:0px 2px 10px #333333;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
Thanks

John