我是全新的，所以如果我偏离轨道，请原谅我。
我只是在玩一个以页面为中心的网站。我想要的是填补下面的空白，但我似乎无法弄清楚如何去做，或者甚至可能。我可能在解释我想要做的事情上做得很差，所以我将包括一张现在看起来像的图片以及我希望它看起来更容易理解的图片。
我可以用我的代码做什么呢？它甚至可能吗？
html {
background-color: lightgrey;
}
body {
display: flex;
flex-direction: row;
width: 960px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
nav {
background-color: black;
width: 200px;
height: 400px;
}
#box1 {
background-color: blue;
width: 200px;
height: 100px;
}
#box2 {
background-color: purple;
width: 200px;
height: 100px;
}
#box3 {
background-color: yellow;
width: 200px;
height: 100px;
}
#box4 {
background-color: red;
width: 200px;
height: 100px;
}
main {
background-color: green;
width: 100vw;
height: 100vh;
}<body>
<nav>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</nav>
<main>
</main>
</body>因为你在<main>之外构建<nav>它位于右侧，你可以将position css属性添加到nav并且它将位于main的顶部，如果这是你所追求的东西，是否有特定的东西你想在导航下面的网站？
您需要将div元素放在主标记内
html {
background-color: lightgrey;
}
body {
display: flex;
flex-direction: row;
width: 960px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
nav {
background-color: black;
width: 200px;
height: 400px;
}
#box1 {
background-color: blue;
width: 200px;
height: 100px;
}
#box2 {
background-color: purple;
width: 200px;
height: 100px;
}
#box3 {
background-color: yellow;
width: 200px;
height: 100px;
}
#box4 {
background-color: red;
width: 200px;
height: 100px;
}
main {
background-color: green;
width: 100vw;
min-height: 100vh;
}<main>
<nav>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</nav>
</main>