HTML and CSS homework: Need help!

Hi! Im having an homework on my webbdevelop class and i need some help. The homework is to make a website looking like this:
Uploading…
And i have done everything right exept one thing. This is the bottom of my webpage:
Uploading…
As you can see the navigation bar is bellow everything else. Can someone help me with this? Here is my code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="stil.css">
		<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
		<title>Uppgift 2016-09-14</title>
	</head>
	<body>
		<div id="mitten">
			<header><h1>Uppgift 2016-09-14</h1></header>
			<nav>
				<ul>
					<li><a href="#1">Något 1</a></li>
					<li><a href="#2">Något 2</a></li>
					<li><a href="#3">Något 3</a></li>
					<li><a href="#4">Något 4</a></li>
				</ul>		
			</nav>
			<section>
				<h2>
					Lorem Ipsum
				</h2>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit efficitur nisl a dapibus. Aenean facilisis consectetur placerat. Donec lobortis sapien eget elit varius, ut lobortis turpis bibendum. Nulla eget libero tortor. Cras tempor ligula lacinia ultrices ullamcorper. Curabitur dignissim ultricies dolor. Quisque maximus, leo convallis ultricies varius, nisi massa molestie augue, efficitur malesuada neque est maximus urna.
					<br><br>
					Donec imperdiet egestas lectus, interdum sodales ante aliquet ac. Nam imperdiet libero non sapien finibus, in condimentum lectus pellentesque. Nunc eros quam, efficitur non ex ut, fringilla condimentum orci. Duis semper velit in hendrerit mattis. Sed ligula urna, imperdiet eget metus vitae, porttitor mattis neque. Integer consequat quam finibus erat tincidunt, ac suscipit arcu mollis. Mauris sodales faucibus odio, sed blandit lacus luctus a. Morbi a aliquam sapien. Quisque pharetra quam neque, et molestie lectus tempor vel. Mauris ac lectus et est luctus porta in ut risus.
					<br><br>
					Integer sit amet metus metus. Proin non tincidunt est. Maecenas nunc urna, consectetur in cursus sed, placerat aliquet nulla. Duis sed semper risus. Duis non ipsum sit amet mauris suscipit bibendum quis a lectus. Proin vel ligula vel diam dignissim accumsan nec ac diam. Pellentesque magna augue, tristique ut nisl sed, sollicitudin lobortis augue. Morbi pretium metus eros, euismod mollis dolor elementum vitae. Nullam cursus pretium nunc in pulvinar. Suspendisse nulla purus, viverra in sem in, faucibus vehicula velit. Aliquam ligula justo, sollicitudin in mi eu, volutpat posuere erat. Sed suscipit lectus vitae risus iaculis, molestie viverra eros blandit. Proin consectetur vel libero in maximus.
					<br><br>
					Vivamus fringilla sodales commodo. Mauris vitae vehicula ligula. Quisque nunc eros, dictum id dui ac, egestas volutpat nibh. Vivamus lobortis dolor et neque euismod tincidunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac nisl placerat, 	cursus neque at, pharetra libero. Curabitur ac massa id velit dignissim efficitur. Sed vulputate risus orci, a vehicula leo consequat quis. Nunc venenatis nisl vel gravida mattis.
					<br><br>
					Morbi nec risus in ante porttitor lobortis id ut justo. Quisque ut lorem auctor, dictum leo vitae, consectetur urna. Nulla augue dolor, commodo ullamcorper sodales sit amet, fringilla sit amet lectus. Maecenas libero tellus, interdum sed accumsan vitae, porta vel mi. Nulla facilisi. Duis eleifend tristique erat, eget varius arcu accumsan et. Sed vitae nisl id ligula gravida ornare vel sit amet mi. Fusce vitae risus et metus ornare luctus. Mauris ut sapien quis enim elementum eleifend eu in ex. Maecenas mollis urna ante, ac rhoncus nulla interdum ut. Sed tellus lectus, consectetur sed ligula nec, sagittis elementum est.
				</p>
			</section>
		</div>
	<body>
</html>
* {
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu', sans-serif;
}

body {
	background-color: grey;
}

#mitten {
	position: relative;
	margin: auto;
	height: 100vh;
	width: 80%;
	background-color: #f7cac9;
}

header {
	background-color: #034f84;
	color: #ffffff;
	text-align: center;
	height: 60px;
}

h1 {
	padding: 10px;
}

nav {
	position: absolute;
	background-color: #92a8d1;
	height: 100vh;
	width: 20%;
	left: 0;
}

section {
	position: absolute;
	left: 25%;
	top: 80px;
	width: 70%;
}

h2 {
	text-align: center;
}

p {
	padding-top: 10px;
}

ul {
	list-style-type: none;
}

li {
	font-size: 30px;
}

li a {
	text-decoration: none;
	display: block;
	padding: 30px;
}

a:hover {
	background-color: #deeaee;
}

a:active {
	background-color: #b1cbbb;
	color: #c94c4c;
}

Thanks in advance!

Your images didn’t upload try uploading them again to your post, click on the pencil icon to edit.
Make sure to wait till you see the image is uploaded then click post

@zainabrawat
Actually how long should you wait to upload your image? I remember that a few days ago I tried to upload something and ended up with uploading after waiting for 10 minutes or so, and even editing it wouldn’t help.

@robeng
Screenshots would help - if uploading them doesn’t work, just provide links to them. But in any case, I pasted your code in my notepad+ and I don’t see any navigation bar… Do you mean these links that were put in <nav> tags?

By the way, you use two <href> tags in link thing in the head. There’s a way to import a font from Google API in CSS file without having to link it in html file.

There is a way, but the problem is it is not asynchonous when loaded with @import so will slow down the page load. Use a <link> to import fonts.

If this homework is for credit, then you should work it out for yourself or ask your teacher for help. Any answers that appear here will be removed to prevent cheating.