visible gap between anchors

January 22, 2024

I can’t get rid of visible gaps between anchors in my navigation menu. I tried everything with padding, margin and width in nav ul and nav li, but the nav li color is still visible. How can I stretch the red color to the full width of the single anchor?

nav {
    display: flex;
    justify-content: center;
    margin: 0px;
    padding: 0px;
    text-align: center;
    text-decoration: none;
}

nav ul {
    list-style: none;
    padding: 0px;
    margin-top: 0px; 
    background-color: rgb(237, 215, 213);
    border-bottom: 2px solid black; 
    border-left: 2px solid black;   
    border-right: 2px solid black;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
  
nav li {
    display: inline-block;
    margin: 0px;
    padding: 10px;
    background-color: red;
    font-size: 20px;
    line-height: 20px;
    border-right: 1px solid black;
}

nav li:last-child {
    border-right: none;
}

<nav>
                <ul>
                    <li><a href="">HOME</a></li>
                    <li><a href="">DESCRIPTION</a></li>
                    <li><a href="">HISTORY</a></li>
                    <li><a href="">LIVE🔴</a></li>
                    <li><a href="">GALLERY</a></li>
                    <li><a href="">CONTACT</a></li>
                </ul>
            </nav>

>Solution :

A quick fix is to apply display: flex; also to the ul element. Otherwise (as you experienced) the linebreaks in the code cause those spaces.

(You could also remove the linebreaks in the code instead of applying flex, but that’s more work…)

nav {
  display: flex;
  justify-content: center;
  margin: 0px;
  padding: 0px;
  text-align: center;
  text-decoration: none;
}

nav ul {
  display: flex;
  list-style: none;
  padding: 0px;
  margin-top: 0px;
  background-color: rgb(237, 215, 213);
  border-bottom: 2px solid black;
  border-left: 2px solid black;
  border-right: 2px solid black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

nav li {
  display: inline-block;
  margin: 0px;
  padding: 10px;
  background-color: red;
  font-size: 20px;
  line-height: 20px;
  border-right: 1px solid black;
}

nav li:last-child {
  border-right: none;
}

<nav>
  <ul>
    <li><a href="">HOME</a></li>
    <li><a href="">DESCRIPTION</a></li>
    <li><a href="">HISTORY</a></li>
    <li><a href="">LIVE🔴</a></li>
    <li><a href="">GALLERY</a></li>
    <li><a href="">CONTACT</a></li>
  </ul>
</nav>