Как сделать так, чтобы моя навигационная панель оставалась слева от моей домашней страницы?

Question

У меня есть панель навигации, и, как видно из jsfiddle, она расположена горизонтально вверху моего сайта, хотя я бы хотел, чтобы она была вертикальной и проходила через весь сайт. Наглядный пример этого можно увидеть здесь . Я не хочу, чтобы это было что-то необычное, как этот пример, просто стандартный вертикальный прямоугольник, в который я могу добавить элементы div и все, что мне нужно добавить.

HTML

<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>

CSS

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

скрипка: https://jsfiddle.net/obs24h61/

Answer 1

Я не уверен, правильно ли я понял ваш вопрос, это то, что вам нужно?

вы были почти там со своим кодом, вам просто нужно немного поиграть, и вы могли бы получить ответ , используйте text-align:left и, если вам нужно, укажите height и width для левой навигационной панели.

Я добавил несколько divs, если это не проблема, что делает вещи чище.

#main{
  width:100%;
  border:1px solid yellow;
  display:inline-block;
}
#left{
  width:30%;
  float:left;
  align-items: right;
  background: #04B4AE;
  color: #F2F2F2;
  text-align: left;
  padding: 0vw .2vw 0vw .2vw;
  display:inline-block;
  height:500px;
}
#right{
margin-left: 31%;
height:500px;
  border:1px solid red;
  background-color:gray;
}
zznav {
  grid-column: 1;
  grid-row-end: 10;
  align-items: right;
  background: #04B4AE;
  color: #F2F2F2;
  text-align: left;
  padding: 0vw .2vw 0vw .2vw;
  display:inline-block; 
}

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <div id="main">
  

  <div id="left">
   <nav>
      <div>
        <h1>ll</h1>
        <p>zwerrrrrrss</p>
        <p>werghhh</p>
        <br>
        <p>zdeeeeeu</p>
        <br>
        <p>awer7</p>
      </div>
    </nav>
  </div>
   <div id="right">
     <header>
      <div>
        <p>lkwwss</p>
      </div>
    </header>
   </div>
     </div>