粘性导航栏<a>标签</a>

Question

I'm very new to html/css/JS and I've made a sticky Navigation bar for my page but I'm having trouble with where the clickable area is for my tags on the navbar. I've some how gotten the clickable area to the left of my text not the text itself. If someone could shed some light on what I've done wrong it would be a massive help. Thanks!

<div class="page-navigation">
  <nav id="navbar">
    <div class="social">
      <img src="Images/facebook-logo.png" alt="facebook link" />
      <img src="Images/twitter-logo.png" alt="twitter link" />
      <img src="Images/linkedin-logo.png" alt="linkedin" />
    </div>
    <img
      src="Images/Logo-ADC%20Systems.png"
      class="logo"
      alt="Logo ADC Systems"
    />
    <ul id="menu">
      <li><a class="nav__links" href="index.html"></a>Home</li>
      <li><a class="nav__links" href="About%20us.html"></a>About Us</li>
      <li><a class="nav__links" href="Services.html"></a>Services</li>
      <li><a class="nav__links" href="Contact%20us.html"></a>Contact Us</li>
    </ul>
  </nav>

.home-navigation{
width: 100vw;
height: 100vh;
background-image: url("Images/Home-Background.jpg");
background-size: cover;
}

.page-navigation{
width: 100vw;
height: 80vh;
background-color: #2D3142;
background-size: cover;
}
.social{
float: right;
padding-right: 0.8rem
}
.social img{
width: 40px
}

nav{
position: relative;
z-index: 1;
Width: 100%;
padding: 0px;
text-align: center;
box-sizing: border-box
}

#navbar a {
float: left;
color:#2D3142;
text-align: center;
padding: 14px;
text-decoration: none;

}
.logo{
width: 300px;
margin: 5px 0;


}   
nav ul{
background: #FFFFFF;
width: 100%;
margin-top: 5px;    
}   
nav ul li{
position: relative;

display: inline-block;
list-style: none;
margin: 20px 30px;
color: #EF8354;
cursor: pointer;

}   


#navbar ul li:hover{
color:#2D3142;
transition: 0.3s ease-out;
}

nav.sticky{
position: sticky;
top: 0;
left: 0;
padding: 10px 8%;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: space-between;
transition: padding 1s;
}

nav.sticky ul{
width: auto;
}

Answer 1

See

<li><a class="nav__links" href="index.html"></a>Home</li>

They should be the following, note where the Home is, inside the link not outside

<li><a class="nav__links" href="index.html">Home</a></li>