My menu bar links are not working on my index page

Question

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?

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?

.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;

}

<div class="header">
      <ul class="menu">
        <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/index.html">Home</a></li>
        <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/services.html">Services</a></li>
        <li>Contact</li>
      </ul>
      <div class="title">
        <h1>ONLOOKER DESIGNS</h1>
      </div>
    </div>

Answer 1

Your href attribute includes a link that uses "file" protocol and more specifically, it is pointing to your own local hard drive.

Other people will not be able to access your local files.

Now, what I would recommend you is use a relative file path instead of an absolute one if you want the files to work on every computer that is accessing your files locally.

This would ideally look like this:

<a href="index.html">

Answer 2

You should try like this:

.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;

}

<div class="header">
      <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li>Contact</li>
      </ul>
      <div class="title">
        <h1>ONLOOKER DESIGNS</h1>
      </div>
    </div>

Answer 3

Try this:

<div class="header">
      <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li>Contact</li>
      </ul>
      <div class="title">
        <h1>ONLOOKER DESIGNS</h1>
      </div>
</div>

, if you have all three files in the same directory.