Header Troubles on my Website <p>Before I posted anyone question, and I got some criticism, so I'm trying to format a better question now. Yeah. So, I'm making a website, and I have a header for navigation. However, in CSS, I put the header with div class = "header" to color:black;. I don't know why the background isn't black and is not there. I made a jsfiddle. As you can see when you go on the jsfiddle , the header is non-existent, and when you scroll down, as you can see, the header is not white. Does anyone know how to make the header solid, or is there inconsistencies in the hierarchy?</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>.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; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;title&gt;My Blog&lt;/title&gt; &lt;meta charset="utf-8"/&gt; &lt;link rel="stylesheet" type="text/css" href="blog.css"&gt; &lt;link rel="icon" href="http://images4.fanpop.com/image/photos/22600000/Smiley-Face-smiley-faces-22608094-1000-1000.png"&gt; &lt;link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"&gt; &lt;link type="text/css" rel="stylesheet" href="jquery.mmenu.css" /&gt; &lt;body&gt; &lt;div class="header"&gt; &lt;div class = "navbar"&gt; &lt;ul&gt; &lt;li&gt;&lt;a id = "strawpoll" href ="#"&gt; Strawpoll &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id = "previousblogs" href ="#"&gt; Previous Blogs &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a id = "aboutme" href ="#"&gt; About Me &lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;script src="app.js"&gt;&lt;/script&gt; &lt;h1&gt;&lt;a href ="#"&gt;My Life&lt;/a&gt;&lt;/h1&gt; &lt;/div&gt; &lt;p&gt; 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. &lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt; &lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt; &lt;/p&gt;&lt;p&gt; bopbopbopbopbopbopbob &lt;/p&gt; sapodksadksa daa &lt;/p&gt;</code></pre> </div> </div> </p> <p>Here is the <a href="https://jsfiddle.net/695y5wjg/3/" rel="nofollow">jsfiddle</a></p> <p>Add in the comments if I'm unclear. Hopefully I am.</p>