Left side navigation bar centered and close to page content - html

Question

I got a side navigation bar that is located on the left side of the page. I would like the position of this to be just left of the content. Example of what I want is in the pictures below:
Current state:
What I would like is the menu to be like this:
How can I do this? Code is here: https://codepen.io/johsflesj/pen/QWQERRj
<nav>
<div class="container">
<ul>
<li class="home active">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="footer">Footer</li>
<li class="yoyo">Yoyo</li>
</ul>
</div>
</nav>
<div class="kropp">
<section id="home">
<h1>Home</h1>
<p>Dette er testskrift som er veldig lang som jeg tester om hvor langt ut til siden den går for det er veldig greit å se hvor langt ut til siden innholdet her faktisk kommer</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="about">
<h1>About</h1>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
<section id="footer">
<h1>Footer</h1>
</section>
<section id="yoyo">
<h1>Yoyo</h1>
</section>
</div>

Answer 1

You can add margin-left:30% to the "container" div, so that it will move closer to "kropp" div, and you have to add media queries if you need this page to be responsive.

Answer 2

Without any margin settings
<div class="box">
<div class="nav_out">
<nav>
<div class="container">
<ul>
<li class="home active">Home</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="footer">Footer</li>
<li class="yoyo">Yoyo</li>
</ul>
</div>
</nav>
</div>
<div class="kropp">
<section id="home">
<h1>Home</h1>
<p>Dette er testskrift som er veldig lang som jeg tester om hvor langt ut til siden den går for det er veldig greit å se hvor langt ut til siden innholdet her faktisk kommer</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="about">
<h1>About</h1>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
<p>Dette er testskrift som er veldig lang</p>
</section>
<section id="contact">
<h1>Contact</h1>
</section>
<section id="footer">
<h1>Footer</h1>
</section>
<section id="yoyo">
<h1>Yoyo</h1>
</section>
</div>
</div>
<style>
#import url("https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap");
html {
font-family: "Roboto Mono";
font-size: 16px;
scroll-behavior: smooth;
}
.kropp {
max-width: 0px;
margin: auto;
padding-left: 40px;
height: 100vh;
max-width: 80%;
}
#home {
background-color: white;
}
#about {
background-color: light-grey;
}
#footer {
background-color: white;
}
#yoyo {
background-color: white;
}
.box {
display: flex;
justify-content: center;
max-width: 80%;
margin: 0 auto;
}
.box .nav_out {
max-width: 20%;
float: left;
}
nav {
position: sticky;
top: 0;
background-color: white;
width: 0px;
}
nav .container {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
margin-left:0%
}
nav .container ul li {
display: inline-block;
}
nav .container ul li a {
display: inline-block;
text-decoration: none;
padding: 10px 20px;
color: black;
}
nav .container ul li.active {
background-color: #E9E9E9;
transition: 0.3s ease background-color;
}
nav .container ul li.active a {
color: rgb(255, 255, 255);
}
</style>

Answer 3

I used flexbox to get the menu to be located at the right position, regardless of browser size.