Stacking menu items vertically not working - html

Question

I am trying to create a dot navigation (similar to what is seen on the full page sliders here on w3 schools) however I cannot seem to stack the dots vertically and centered to the right of the page
I have tried a lot of the answers available here (linked below) but none seem to be working.
(Using margin:auto to vertically-align a div, Vertically center ul in div, How do i center li element in ul vertically? css, How to force a list to be vertical using html css)
Display block in the li tags worked but then the elements were displaying as their own section and not on top of the background images as the user scrolls. Perhaps something is conflicting that I can't quite seem to pinpoint.
Thanks
HTML and CSS
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}
nav {
position: absolute;
top: 6px;
right: 12px;
}
nav ul {
/* position: relative; */
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
}
nav li {
position: relative;
display: inline;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}
nav li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
position: relative;
border-radius: 50%;
background-color: rgba(155,155,155,0.3);
text-indent: -999em;
cursor: pointer;
position: absolute;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About us</li>
<li>Contact</li>
</ul>
</nav>
<section>
</section>
</div>

Answer 1

You have errors in your html code <div class="container> must be <div class="container"> and this <li>About us/a></li> must be <li><a href="#about us" class="space-item">About us</li>
Check this snippet
.container {
width: 100%;
height: 100%;
overflow-y: scroll;
}
nav {
position: absolute;
top: 6px;
right: 12px;
}
nav ul {
/* position: relative; */
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
cursor: default;
}
nav li {
position: relative;
display: inline;
margin: 0 16px;
width: 16px;
height: 16px;
cursor: pointer;
}
nav li a {
top: 0;
left: 0;
width: 100%;
height: 100%;
outline: none;
position: relative;
border-radius: 50%;
background-color: lightgrey;
text-indent: -999em;
cursor: pointer;
position: absolute;
}
<div class="container">
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About us</li>
<li>Contact</li>
</ul>
</nav>
<section>
</section>
</div>