Move sidebar under header
<p>It's been two days since I started trying to make this work and I swear I can't see what I'm doing wrong.
This is my HTML</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Arvo"&gt;
&lt;link rel="stylesheet" type="text/css" href="../css/main.css"&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;Home Page&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="header"&gt;
Home
&lt;/div&gt;
&lt;div id="sidebar"&gt;
&lt;ul&gt;
&lt;li&gt;test&lt;/li&gt;
&lt;li&gt;test&lt;/li&gt;
&lt;li&gt;test&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
</code></pre>

<p></p>

<p>And this is the CSS</p>

<pre><code>* { margin:0; padding:0; }

div#header {
position:fixed;
outline: none;
text-align:center;
font-family:'Arvo', serif;
color:white;
font-size:48px;
height:5%;
width:100%;
background-color: rgba(0,79,113,1);
}

div#sidebar {
position:relative;
bottom
font-family:'Arvo', serif;
list-style-type: square;
list-style-position: inside;
color:white;
height:100%;
width:5%;
background-color: rgba(100,147,167,1);
}

li{
font-family:'Arvo', serif;
}
</code></pre>

<p>I'm a complete CSS noob(my code is probably horrible) and I would want the sidebar under the header bar, and the text in the middle of the sidebar aligned to the right. Can someone help?</p>

<p>jsfiddle: <a href="https://jsfiddle.net/k5ffLzoe/" rel="nofollow">https://jsfiddle.net/k5ffLzoe/</a></p>