Fixed sidebar next to a centered blogpost - html

Question

for a page with a lot of text, readers should be able to navigate between sections with ease. As such I want to present an Index on the left-hand side of the main text that is permanently visible. The main text should be centered and should fill about 75% of the screen.
I have been messing around for a few hours but I just can't seem to get it right. Either the columns are overlapping, or there is white-space between them and won't center nicely.
HTML
<div class="wrapper">
<div class="row">
<!-- Sidebar -->
<nav id="sidebar">
<ul> Content
<li>Guidelines </li>
<li>Geographic Focus </li>
<li>Fields of Interest </li>
</ul>
</nav>
<div id="content">
<div id="blog">
</div>
</div>
</div>
</div>
CSS
.wrapper .row {
display: flex;
border-style:solid;
width:100%;
justify-content:center;
align-content: center;
align-self:center;
}
#sidebar {
position: fixed;
display:flex;
border-style:solid;
min-height:100vh;
color:black;
flex-direction:column;
padding-top:70px;
width: auto;
}
#blog {
float: left;
width:75%;
padding:0;
border-style:solid;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}

Answer 1

Updated based on comment
In addition to grid, use flexbox to move the navigation towards the content
Original answer
You could create this layout using CSS Grid. Example:
.wrapper {
display: grid;
grid-template-columns: 25% 75%;
}
#sidebar {
display: flex;
justify-content: flex-end;
}
#sidebar ul {
position: fixed;
display: grid;
align-content: center;
height: 100%;
max-width: 25%;
padding: 0;
}
<div class="wrapper">
<nav id="sidebar">
<ul> Content
<li>Guidelines </li>
<li>Geographic Focus </li>
<li>Fields of Interest </li>
</ul>
</nav>
<div id="content">
<div id="blog">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore praesentium sit, magnam voluptate pariatur harum veniam nostrum explicabo quibusdam mollitia vel blanditiis qui, voluptates totam, alias rerum sequi, eveniet. Iusto.</p>
</div>
</div>
</div>

Answer 2

The snippet below gives you an initial shot with minimal changes to your original code.
Still there might be better ideas. This idea places a fixed block, as requested, with 25% width and ensures, that the main content respects this 25% as a left-margin.
<html>
<head>
<style type="text/css">
#sidebar {
background: red; /* for visual testing */
position: fixed;
min-height:100vh;
padding-top:70px;
width: 25%;
}
#blog {
background: blue; /* for visual testing */
width:75%;
margin-left: 25%;
text-align: center;
}
</style>
</head>
<body>
<!-- Sidebar -->
<div id="sidebar">
<ul> Content
<li>Guidelines </li>
<li>Geographic Focus </li>
<li>Fields of Interest </li>
</ul>
</div>
<div id="content">
<div id="blog">
Test text.
</div>
</div>
</body>
</html>

Answer 3

Remove the fixed position and add this to your #sidebar
#sidebar {
position: -webkit-sticky;
position: sticky;
top: 21px;
}
Don't forget to override the sticky position on small screens :)