Html 如何使导航栏保持在主页的左侧？

我有一个导航栏，正如人们在JSFIDLE中看到的，它水平放置在我的网站顶部，而我希望它是垂直的，贯穿整个网站。可以看到一个直观的例子。我不希望它像那个例子一样花哨，只是一个标准的垂直矩形，我可以添加div和任何我需要添加的东西

HTML

---

小提琴：我不确定我是否正确理解了你的问题，这是你需要的吗

您的代码就快到了，您只需多玩一会儿，就可以得到答案，使用

text align:left

，如果需要，为左侧导航栏提供一些

高度和
宽度

我添加了一些
div
，如果这不是问题的话，这会使事情变得更干净


#主{
宽度：100%；
边框：1px纯黄色；
显示：内联块；
}
#左{
宽度：30%；
浮动：左；
对齐项目：右对齐；
背景#04B4AE；
颜色：#F2F2；
文本对齐：左对齐；
填料：0vw.2vw 0vw.2vw；
显示：内联块；
高度：500px；
}
#对{
左边缘：31%；
高度：500px；
边框：1px纯红；
背景颜色：灰色；
}
zznav{
网格柱：1；
网格行端：10；
对齐项目：右对齐；
背景#04B4AE；
颜色：#F2F2；
文本对齐：左对齐；
填料：0vw.2vw 0vw.2vw；
显示：内联块；
}

陆上通信线
ZWERRRSS

werghhh



Zdeeeeu



awer7

lkwwss

我很高兴能够帮助您，如果您认为它是否值得投票，您介意接受它作为答案并投票吗？谢谢。事实上，我很抱歉，但经过审查后，这并不是我想要的。标题块仍然位于导航栏下方，而我希望它能够使网站的整个主体位于导航栏的右侧。您编写的代码将显示在
nav
下方，因此您需要
header
块移动到右侧？标题和其他所有内容，是。@jkjwqq我也用颜色代码更新了我的代码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <nav>
      <div>
        <h1>ll</h1>
        <p>zwerrrrrrss</p>
        <p>werghhh</p>
        <br>
        <p>zdeeeeeu</p>
        <br>
        <p>awer7</p>
      </div>
    </nav>
    <header>
      <div>
        <p>lkwwss</p>
      </div>
    </header>

nav {
  grid-column: 1;
  grid-row-end: 10;
  align-items: right;
  background: #04B4AE;
  color: #F2F2F2;
  text-align: center;
  padding: 0vw .2vw 0vw .2vw;
}