Sidebar drops to the bottom of the page whenever it isn't in fixed position

I want my sidebar to be positioned to the left from the main block and the header, so that when the size of the window changes, all blocks move together, however, whenever I change its position from fixed to relative/sticky, it drops to the bottom of the page. Alternatively, the sidebar could stay fixed, but I need to find a way to stop other blocks from going under it when window size changes.

html:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <link rel ="stylesheet" href="css/main.css">
    <title>Homepage</title></head>
    
    <body>
    
        <div class="header"><div class="element" style="display: flex;"><div class="container">
            <button class="button" >1</button>
            <button class="button" >2</button>
            <button class="button" >3</button>
        </div></div></div>
        <div class="main"><div class="element">
            <h1>TestText</h1>
            <p>TestText</p>
            <h1>TestText!</h1>
        </div></div>
        <div class="sidebar"><div class="element"><div class="container"> 
        <p>TestText</p>
            <a   href="about.html" target="_blank" title="click here~" >
                <button class="button">!</button>
            </a>
            <p><button class="button">!!</button></p>
            <p><button class="button">!!!</button></p>
        </div></div></div>
    </body>
</html>

css

body {background-color: #1c1f2b;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        font-family: Humaroid;
        srs:url(/fonts/Humaroid.otf) format("opentype");
        font-size: 1.25rem;
        word-break: break-all;}
.container{margin-left: auto;
            margin-right: auto;
            position: center;}   

.sidebar {
  color: #FED2C7;
  text-shadow:
   -1px -1px 0 #704935,  
    1px -1px 0 #704935,
    -1px 1px 0 #704935,
     1px 1px 0 #704935;
    height: 100%;
    width: 160px;
    position: fixed;
    z-index: 1; 
    top: 0;
    left: 0;
    overflow-x: hidden;
    padding-top: 20px;
    background-color: #faf4e6;
    margin-right: 20px;
    }
.header {background-color: #faf4e6;
            height: 90px;
            width: 940px;
            position: relative;
            margin: 0 auto;
            padding-bottom: 10px
            }
            
.main{ width: 940px;
        height: 80vh;
        margin: 0 auto;
        padding: 30 px;
        background-color: #faf4e6;}
.element{
    font-weight: 400;
    text-align: left;
    margin: 1em;}

I've seen someone mentioning that this problem might be caused by div block being left open, but this doesn't seem to be the case for me. I also tried to add bottom margin to the sidebar, but that does nothing.

Solution

body {
      background-color: #1c1f2b;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font-family: Humaroid;
      srs: url(/fonts/Humaroid.otf) format("opentype");
      font-size: 1.25rem;
      word-break: break-all;
    }
    .container {
      margin-left: auto;
      margin-right: auto;
      position: center;
    }

    .sidebar {
      color: #fed2c7;
      text-shadow: -1px -1px 0 #704935, 1px -1px 0 #704935, -1px 1px 0 #704935,
        1px 1px 0 #704935;
      height: 100%;
      width: 160px;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      overflow-x: hidden;
      padding-top: 20px;
      background-color: #faf4e6;
      margin-right: 20px;
    }
    .header {
      background-color: #faf4e6;
      height: 90px;
      width: 50%;
      position: relative;
      margin: 0 auto;
      padding-bottom: 10px;
    }

    .main {
      width: 50%;
      height: 80vh;
      margin: 0 auto;
      padding: 30 px;
      background-color: #faf4e6;
    }
    .element {
      font-weight: 400;
      text-align: left;
      margin: 1em;
    }
    .body-element {
      margin-left: 160px;
    }

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="css/main.css" />
    <title>Homepage</title>
  </head>
  <body>
    <div class="body-element">
      <div class="header">
        <div class="element" style="display: flex">
          <div class="container">
            <button class="button">1</button>
            <button class="button">2</button>
            <button class="button">3</button>
          </div>
        </div>
      </div>
      <div class="main">
        <div class="element">
          <h1>TestText</h1>
          <p>TestText</p>
          <h1>TestText!</h1>
        </div>
      </div>
    </div>
    <div class="sidebar">
      <div class="element">
        <div class="container">
          <p>TestText</p>
          <a href="about.html" target="_blank" title="click here~">
            <button class="button">!</button>
          </a>
          <p><button class="button">!!</button></p>
          <p><button class="button">!!!</button></p>
        </div>
      </div>
    </div>
  </body>
</html>

Try this code. if it's not working well, let me know.