Sticky Navigation bar <a> tags-CodePudding

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 >
  <nav id="navbar">
    <div >
      <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 Systems.png"
      
      alt="Logo ADC Systems"
    />
    <ul id="menu">
      <li><a  href="index.html"></a>Home</li>
      <li><a  href="About us.html"></a>About Us</li>
      <li><a  href="Services.html"></a>Services</li>
      <li><a  href="Contact us.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;
}

CodePudding user response：

See

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

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

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