title: Left side navigation bar centered and close to page content
body: <p>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:</p>
  <p>Current state:
  <a href="https://i.stack.imgur.com/smAoO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/smAoO.png" alt="Now" /></a></p>
  <p>What I would like is the menu to be like this:</p>
  <p><a href="https://i.stack.imgur.com/ZCQAs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZCQAs.png" alt="Dream situation" /></a></p>
  <p>How can I do this? Code is here: <a href="https://codepen.io/johsflesj/pen/QWQERRj" rel="nofollow noreferrer">https://codepen.io/johsflesj/pen/QWQERRj</a></p>
  <pre><code>&lt;nav&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;ul&gt;
        &lt;li class=&quot;home active&quot;&gt;&lt;a href=&quot;#home&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;about&quot;&gt;&lt;a href=&quot;#about&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;contact&quot;&gt;&lt;a href=&quot;#contact&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;footer&quot;&gt;&lt;a href=&quot;#footer&quot;&gt;Footer&lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;yoyo&quot;&gt;&lt;a href=&quot;#yoyo&quot;&gt;Yoyo&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
    &lt;div class=&quot;kropp&quot;&gt;
    &lt;section id=&quot;home&quot;&gt;
      &lt;h1&gt;Home&lt;/h1&gt;
      &lt;p&gt;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&lt;/p&gt;
      &lt;p&gt;Dette er testskrift som er veldig lang&lt;/p&gt;
      &lt;p&gt;Dette er testskrift som er veldig lang&lt;/p&gt;
    &lt;/section&gt;
    &lt;section id=&quot;about&quot;&gt;
      &lt;h1&gt;About&lt;/h1&gt;
      &lt;p&gt;Dette er testskrift som er veldig lang&lt;/p&gt;
      &lt;p&gt;Dette er testskrift som er veldig lang&lt;/p&gt;
      &lt;p&gt;Dette er testskrift som er veldig lang&lt;/p&gt;
      &lt;p&gt;Dette er testskrift som er veldig lang&lt;/p&gt;
    &lt;/section&gt;
    &lt;section id=&quot;contact&quot;&gt;
      &lt;h1&gt;Contact&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section id=&quot;footer&quot;&gt;
      &lt;h1&gt;Footer&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section id=&quot;yoyo&quot;&gt;
      &lt;h1&gt;Yoyo&lt;/h1&gt;
    &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>