Divs not positioning correctly
<p>I have a div called menu, and I have a another div called content these 2 divs are inside a div called container to keep them in place. 
I tried adding a div called text-box inside the content div, but somehow this div gets placed in the menu div! 
I want the textbox div placed in the content div, not the in the menu.</p>

<p><strong>The Code (<a href="https://jsfiddle.net/9xh3xdon/1/" rel="nofollow">https://jsfiddle.net/9xh3xdon/1/</a>):</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>/*Global*/
* {
  margin: 0px;
}
body {}
h1,
h2,
h3,
h4,
h5,
h6 {}
h1 {}
h2 {}
h3 {}
h4 {}
a {}
img {}
#container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  position: absolute;
}
#headcontainer {
  width: 100%;
  height: 100vh;
  background-color: pink;
}

/* navigation */
#menu {
  height: 100px;
  width: 100%;
  background-color: rgba(0, 0, 255, 0.1);
  position: absolute;
  max-height: 100px;
  margin-top: 100vh;
  border: 1px solid black;
  border-top: none;
}
#menu li {
  display: inline-block;
  text-decoration: none;
  padding-left: 20px;
  position: relative;
}
#menu ul {
  float: right;
  height±: 100%;
  width: auto;
  line-height: 100px;
}
#menu ul li {
  padding-right: 20px;
}
#menu ul li:hover {
  cursor:pointer;
  color: white;
}
#logo {
  height: 40px;
  width: 200px;
  background-color: red;
  float: left;
  margin-top: 0px;
  margin-top: 30px;
  margin-left: 20px;
}

/*content*/
#content {
  width:100%;
  height:auto;
  min-height:500px;
  position: relative;
}
.text-box {
  width:200px;
  height:auto;
  background-color:blue;
  min-height:100px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'&gt;
    &lt;title&gt;random&lt;/title&gt;
    &lt;!--   &lt;link rel="stylesheet" type="text/css" href="styles/style.css"&gt; --&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id="headcontainer"&gt;
        &lt;div id="menu"&gt;
          &lt;div id="logo"&gt;
            &lt;p&gt;Hier komt een logo&lt;/p&gt;
          &lt;/div&gt;
          &lt;ul&gt;
            &lt;li&gt;Home&lt;/li&gt;
            &lt;li&gt;Over&lt;/li&gt;
            &lt;li&gt;Contact&lt;/li&gt;
            &lt;li&gt;Producten&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
        &lt;div class="text-box"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>