How do i close the letter gap accross my navbar at the top

April 25, 2022

So there is the letter spacing/gap between each word and i want to minimize that, but when i try to do it the only thing that shrinks is the button itself.

.navbar {
  position: fixed;
  top: 0;
  right: 7%;
  z-index: 10;
  display: flex;
  text-align: center;
  display: table;
}

.navbar ul {
  flex: 1;
  text-align: right;
  padding: 40px;
  background: transparent;
}

.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 30px;
  background: transparent;
}

.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 30px;
  background: transparent;
}

.navbar ul li a {
  color: #6dffe7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
  cursor: pointer;
}

body { background: black; }

<div class="page">
  <nav class="navbar">
    <ul>
      <div class="download-btn">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#work">Work</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="Alberto Aday Resume.docx" class="btn"> Download Resume</a></li>
      </div>
    </ul>
  </nav>
</div>

Thank you for your help

navbar gap shown

>Solution :

Looking at the image it seems like you want to adjust nav items spacing instead of letter spacing/gap.
You can try to adjust paddings/margins on navbar ul and the li child items.
Also, you have duplicate display prop on .navbar you can remove one.

.navbar {
  background-color: #12182b;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  display: flex;
  text-align: center;
}

.navbar ul {
  flex: 1;
  text-align: right;
  padding: 20px;
  background: transparent;}.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
  background: transparent;
}

.navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 10px 20px;
  background: transparent;
}

.navbar ul li a {
  color: #6dffe7;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
  cursor: pointer;
}

<nav class="navbar">
  <ul>
    <div class="download-btn">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
      <li>
        <a href="Alberto Aday Resume.docx" class="btn"> Download Resume</a>                     </li>
    </div>
  </ul>
  </nav>