title: My menu bar links are not working on my index page
body: <p>The code I linked here works, but not on my computer within Atom.  Is it because I am linking it locally instead of to a server?</p>
  
  <p>I made two separate pages and added links at the top to flip between them.  On both pages I am using the same CSS that I copied and pasted however, on the index page the links are not working, while the services page they are working just fine?  </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{
    display: block;
    background-image:  url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-filter: brightness(130%);
    min-height: 70vh;
    overflow: hidden;
  }
  
  .menu{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
  }
  
  .header ul li a:hover{
      background: white;
      color: gray;
  }
  
  
  .header ul li{
    float: left;
    list-style: none;
    padding: 10px 10px;
  }
  
  .menu ul li a{
    text-decoration: none;
    padding: 10px 10px;
    margin: 0;
    text-align: center;
    font-size: 50px;
    display: flex;
    transition: all .5s ease;
    border-radius: 4px;
    color: Blue;
  }
  
  .title{
    clear: both;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0;
    margin: auto;
  }
  
  .title h1{
    background: -webkit-linear-gradient(left, #0d78f7,navy);
    font-size: 40px;
   background: -webkit-linear-gradient(left, #0d78f7, navy);
   background: -o-linear-gradient(left, #0d78f7, navy);
   background: -moz-linear-gradient(left, #0d78f7, navy);
   background: linear-gradient(left, #0d78f7, navy);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display:flex;
  justify-content: center;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="header"&gt;
        &lt;ul class="menu"&gt;
          &lt;li&gt;&lt;a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/services.html"&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;Contact&lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="title"&gt;
          &lt;h1&gt;ONLOOKER DESIGNS&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>