My Troubles with a Header

HTML

<title>My Blog</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="blog.css">
        <link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png">
        <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
   	<link type="text/css" rel="stylesheet" href="jquery.mmenu.css" />
    <body>
<div class="header">
<div class = "navbar">
  <ul>
        <li><a id = "strawpoll" href ="#"> Strawpoll </a></li>
        <li><a id = "previousblogs" href ="#"> Previous Blogs </a></li>
        <li><a id = "aboutme" href ="#"> About Me </a></li>
  </ul>
</div>
	<script src="app.js"></script>
	<h1><a href ="#">My Life</a></h1>
</div>
<p>
texttext, yeah, I put this here to increase the page length, so that I can show you guys the header is not filled in. starting from here its all reandom stuff.
<p>
bopbopbopbopbopbopbob
</p>
<p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
<p>
bopbopbopbopbopbopbob
</p><p>
bopbopbopbopbopbopbob
</p>
</p><p>
bopbopbopbopbopbopbob
</p>
sapodksadksa
daa
</p>

CSS

.header {
  position:relative;
  top:-20px;
  left:0px;
  width:100%;
  background-color:#000000;
  border-left: 5px solid white;
}
.header ul li a {
  color: black;
  position: fixed;
  top: 13px;
  font-weight: bold;
  text-decoration: none;
  //background: #000000;
}
ul {
  list-style-type: none;
}
a#strawpoll {
  right: 215px;
}
a#previousblogs {
  right: 95px;
}
a#aboutme {
  right: 15px;
}
h1 {
  text-align: left;
  position: fixed;
  left: 10px;
  top: -10px;
  color: black;
}
body {
  position: relative;
  top: 60px;
  font-family: 'Raleway', sans-serif;
  background-image:
  //url('https://cms-images.idgesg.net/images/article/2015/11/black-100630491-orig.jpg');
  background-size: cover;
  color: white;
  text-align: center;
  color: black;
}
a:link {
  color: black;
  text-decoration: none;
}
.header a:hover {
 text-decoration: underline; 
}
a:visited {
  color: black;
  text-decoration: none;
}