title: Href links for navigation bar
body: <p>I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the "Home" link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren't clickable. All the files are located in the same folder.</p>
  
  <pre><code>&lt;head&gt;
  
  &lt;title&gt;Music Project&lt;/title&gt;
  
  &lt;link href="MusicProject.css" rel="stylesheet" /&gt;
  
      &lt;div id="header"&gt;
      &lt;h1 align="center" style="margin-top: -155px"&gt;&lt;img src="logo.png" alt="logo" id="logo" height="500" width="700" /&gt;&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div id="nav"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="Music Project.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="Artist.html"&gt;Artists&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="album.html"&gt;Mixtapes/Albums&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="suggestions.html"&gt;Suggestions&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="about.html"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/head&gt;
  
  #header {
      background-color: #888888;
      height:380px;
      margin:0px;
      padding:0px;
  
      }
  body {
      background-color: #C0C0C0;
      margin:0px;
      padding:0px;
  }
  #main {
      overflow: auto;
  }
  #content {
      float:left;
  }
  #side {
      float:left;
  }
  #nav {
      height: 42px;
      background-color: #888888;
      }
  #nav ul {
      list-style-type:none;
      height:30px;
      padding:0px;
      margin:0px;
          }
  #nav ul li {
      float:left;
      margin:10px;
      width:246px;
      text-align:center;
      font-family:"Arial";
      font-size: 23px;
      color: #00004B;
  }
  #nav ul li a {
      display: inline;
      width: 246px;
  }
  </code></pre>