Fixed nav bar, won't let me scroll
<p>So i have this website I'm working on, which looks like this: <a href="https://i.stack.imgur.com/Mi0z7.png" rel="nofollow"><img src="https://i.stack.imgur.com/Mi0z7.png" alt="enter image description here"></a>
I want the top nav bar to stay fixed when i scroll down the page. However, if i add more content to the page, i can't seem to scroll? 
I would highly appreciate if someone would help me out. Thanks in advance.</p>

<p>Here is my CSS &amp; HTML</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    margin: 0;
    padding: 0;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.wrapper {
  width: 1100px;
  max-width: 90%;
  margin: 0 auto;
}

#top_header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  background-color: #26ABF5;
  height: 70px;
  width: 100%;
  vertical-align: middle;
}

#logo_top {
  display: inline-block;
  float: left;
  width: 53px;
  padding-top: 8px;
}

#main_nav {
  display: inline-block;
  font-size: 13px;
  line-height: 70px;
  padding-left: 150px;
}

#main_nav a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  margin-left: 6em;
}

.button {
  float: right;
  justify-content: center;
  display: flex;
  width: 101px;
  margin-top: 16px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 2px;
  background-color: #fff;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  color: #26abf5;
  font-size: 13px;
  font-weight: 600;
}

.banner {
  height: 400px;
  background-image: url('../images/Banner_bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}

.banner_header {
  margin-top: 0;
  display: flex;
  padding-top: 89px;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 33px;
}

.banner_paragraph {
  display: flex;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.5px;
  margin-top: -15px;
}

.priser_button {
  display: flex;
  width: 207px;
  justify-content: center;
  border: 3px solid #fff;
  -webkit-transition: background-color 400ms ease;
  transition: background-color 400ms ease;
  font-family: 'Open Sans', sans-serif;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  padding: 9px 0 9px 0;
  text-decoration: none;
}

.priser_button:hover {
  background-color: #26abf5;
}

.container {
  display: flex;
  padding-top: 84px;
  justify-content: center;
}

.logo {
  width: 53px;
  padding-top: 5px;
}

.underbanner_header {
  display: flex;
  margin-top: 30px;
  justify-content: start;
  font-family: 'Open Sans', sans-serif;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;header id="top_header"&gt;
      &lt;div class="wrapper"&gt;
        &lt;a href="index.html"&gt;&lt;img id="logo_top" draggable="false" src="images/logo1.png"&gt;&lt;/a&gt;
          &lt;nav id="main_nav"&gt;
            &lt;a href="index.html"&gt;FORSIDE&lt;/a&gt;
            &lt;a href="#"&gt;HVAD TILBYDER VI?&lt;/a&gt;
            &lt;a href="#"&gt;PRISER&lt;/a&gt;
            &lt;a href="#"&gt;OM OS&lt;/a&gt;
          &lt;/nav&gt;
            &lt;a class="button" href="#"&gt;LOG IND&lt;/a&gt;
      &lt;/div&gt;
        &lt;div class="banner"&gt;
          &lt;h2 class="banner_header"&gt;DANMARKS FEDESTE FITNESS CENTER&lt;/h2&gt;
          &lt;p class="banner_paragraph"&gt;BLIV EN DEL AF TEAMET I DAG&lt;/p&gt;
          &lt;div class="container w-container"&gt;&lt;a class="priser_button w-button" href="#"&gt;SE VORES PRISER&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="underbanner"&gt;
      &lt;div class="wrapper"&gt;
        &lt;h3 class="underbanner_header"&gt;NYT CENTER I SØNDERBORG&lt;/h3&gt;
        &lt;p class="content_p"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
</div>
</div>
</p>