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!


* {
  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>

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

    <div class="danctes">
      <a href="#">danctes
      <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>

1 answer

  • answered 2021-05-15 18:14 AmD

    You forgot to close the tag.

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

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