CSS Beginner question: Extra clickable space in between buttons

Hello and thank you for every answer.

How can I remove that clickable space that always shows to me as extra to my navbar?

Thank you!

https://codepen.io/danctes/pen/YzZWGZO

* {
  padding: 0;
  margin: 0;
}

body {
  background-color: antiquewhite;
}

nav {
  background-image: linear-gradient(to right, darkgreen, limegreen);
  border-top: 5px solid darkgreen;
  margin-top: 30px;
  height: 50px;
  position: relative;
  width: 100vw;
}

a {
  text-decoration: none;
  color: AntiqueWhite;
  font-family: arial;
  font-weight: bold;
}

nav .danctes {
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translate(-50%, -50%);
}

ul {
  float: right;
  list-style-type: none;
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translate(-50%, -50%);
}

li {
  display: inline-block;
}

.danctes {
  font-size: 1.75em;
}

ul a {
  text-transform: uppercase;
  margin: 0 5px;
  font-size: 1.25em;
  border: 1px solid red;
}
<!doctype html>
<html>

<head>
  <title>
    My first navbar
  </title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
  <nav>
    <div class="danctes">
      <a href="#">danctes
          </a>
    </div>
    <ul>
      <li><a href="https://www.digisport.ro/">Home</li>
          <li><a href="https://www.reddit.com/">Reddit</li>
          <li><a href="https://9gag.com/">9gag</li>
          <li><a href="https://www.facebook.com/">Facebook</li>
          <li><a href="https://www.instagram.com/">Instagram</li>
        </ul>
      </nav>
    </body>
    </html>

1 answer

  • answered 2021-05-15 18:14 AmD

    You forgot to close the tag.

    <ul>
          <li><a href="https://www.digisport.ro/">Home</a></li> <!-- </a> missing in your code -->
          <li><a href="https://www.reddit.com/">Reddit</a></li>
          <li><a href="https://9gag.com/">9gag</a></li>
          <li><a href="https://www.facebook.com/">Facebook</a></li>
          <li><a href="https://www.instagram.com/">Instagram</a></li>
    </ul>
    

    For more information: https://www.w3schools.com/tags/tag_a.asp