关于 css:HTML 标头没有以正确的宽度出现

HTML header is not coming out at the correct width

这是我为我的页面制定的计划：

主体宽度 x 高度为 600 x 800 像素；没有填充，这样如果里面的元素没有边距，它们就可以紧贴墙壁。
正文中的 3 个元素：页眉、主要内容和页脚，它们被视为类(因为我将在我的网站的多个页面上使用相同的布局)。
3 个元素的宽度均为 598 像素，边距为 0 像素，边框为 1 像素，因此它们完全适合正文。边框将被虚线以添加视觉上下文。
这 3 个元素将通过 150、500 和 150 像素来划分主体的高度。它们的 1 像素底部/顶部边界将重叠。所以页面的垂直空间将是顶部的 1 像素边框、148 像素的空间、1 像素的边框、499 像素的空间、1 像素的边框、149 像素的空间和最后 1 像素的边框底部。

如果可以，请向我解释我在实现的 HTML 逻辑中哪里出错了。预览页面时，我的页眉宽度不正确。 (很明显，当我完成它时，我的页面看起来会变得丰富多彩和充满活力。现在我只是试图让布局正确。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<html>

<head>
div practice
<style type="text/css">
body
{
padding: 0px;
height: 800px;
width: 600px;
}
.header
{
margin: 0px;
border: 1px dashed;
width: 598 px;
height: 148px;
position: absolute;
top: 0px;
left: 0px;
}
.mainContent
{
margin: 0px;
border: 1px dashed;
width: 598px;
height: 500px;
position: absolute;
top: 148px;
left: 0px;
}
.footer
{
margin: 0px;
border: 1px dashed;
width: 598px;
height: 148px;
position: absolute;
top: 648px;
left: 0px;
}
</style>
</head>

<body>

<p>This is where the header goes</p>

<p>This where the main content goes</p>

<p>This is where the footer goes</p>

</body>

</html>