Why is my navbar not lining up when padding should do this?-CodePudding

Below shows what my current navbar looks like.
The first number displays in the button area, where the ones after show beneath it.
[MyMenu][1] [1]: https://i.stack.imgur.com/a2dwT.png

<nav>
 <div id="navbar"><ul>
  <li><a href = ""  onclick="dummy(0); return false;">---1---</a></li>
  <li><a href = "events" ></a>---2---</li> <!--Upcoming Events, Join Clubs, Contact Us-->
  <li><a href = "clubs" ></a>---3---</li> 
  <li><a href = "contact" ></a>---4---</li>
 </ul></div>
</nav>

#navbar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
}
#navbar ul {
    list-style-type: none;
}
#navbar ul li {
    display: inline;
    float: left;
}
#navbar ul li a {
    display: block;
    padding: 20px;
    text-decoration: none;
}
#navbar ul li a:hover {
    background-color: #B30003;
}

I believe the issue is with the padding!
Does it have something to do with the following line?

#navbar ul li a {

All help is appreciated. Thanks for your read!

CodePudding user response：

The HTML a tag is closed in the wrong place. Correct like this.

<nav>
  <div id="navbar">
    <ul>
      <li><a href="" >---1---</a></li>
      <li><a href="events" >---2---</a></li>
      <li><a href="clubs" >---3---</a></li>
      <li><a href="contact" >---4---</a></li>
    </ul>
  </div>
</nav>

CodePudding user response：

Try this:

#navbar {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
    left: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 1);
}
#navbar ul {
    list-style-type: none;
}
#navbar ul li {
    display: inline;
    float: left;
}
#navbar ul li a {
    display: block;
    padding: 20px;
    text-decoration: none;
}
#navbar ul li a:hover {
    background-color: #B30003;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
   <nav>
    <div id="navbar">
     <ul>
      <li><a href = ""  onclick="dummy(0); return false;">---1---</a></li>
      <li><a href = "events" >---2---</a></li> <!--Upcoming Events, Join Clubs, Contact Us-->
      <li><a href = "clubs" >---3---</a></li> 
      <li><a href = "contact" >---4---</a></li>
     </ul>
    </div>
   </nav>
  </body>
</html>

CodePudding user response：

When i tried to copy your Html and css code, i fix the closing tag and the content of the A tag. when i run the code, it is fine. its the same answer like what Muhammad Karimi Answer.

<nav>
<div id="navbar">
  <ul>
    <li>
      <a href = ""  onclick="dummy(0); return false;">---1---</a> 
    </li>
    <li>
      <a href = "events" >---2---</a>
    </li>
    <li>
      <a href = "clubs" >---3---</a>
    </li> 
    <li>
      <a href = "contact" >---4---</a>
    </li>
  </ul>
</div>