Как бы я удалил эти небольшие пробелы в нижней и правой части элементов навигационной панели?

Я пытаюсь убрать эти небольшие промежутки между моими элементами nav-link и navbar снизу, а также с правой стороны, но, похоже, не могу понять. Я попытался установить min-height: 0 и изменить его на display: flex и align-items свойства justify-content и align-items , но не достиг желаемого результата. Как еще я мог заставить это работать?

Вот скриншот: скриншот проблемы

Вот мой код:

header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#logo-container {
  width: 50%;
  text-align: left;
  background-color: lightblue;
}

#navbar {
  font-size: 1.4em;
  width: 50%;
  text-align: right;
  background-color: orange;
  padding: 10px 0px 10px 0px;
}

.nav-link {
  padding: 10px;
  text-decoration: none;
  background-color: green;
}

.nav-link:hover {
  background-color: gray;
}
<header>
    <div id="logo-container"></div>
    
    <nav id="navbar">
      <a class="nav-link" href="#welcome-section">About</a>
      <a class="nav-link" href="#projects">Projects</a>
      <a class="nav-link" href="#contact">Contact</a>
    </nav>
</header>

Всего 2 ответа


Заменить этот CSS

#navbar {
font-size: 1.4em;
width: 50%;
text-align: right;
background-color: orange;
/* padding: 10px 0px 10px 0px; */
display: flex;
justify-content: flex-end;

}


Использование flex с justify-content: flex-end; мы можем достичь желаемого результата

header {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

#logo-container {
  width: 50%;
  text-align: left;
  background-color: lightblue;
}

#navbar {
  font-size: 1.4em;
  width: 50%;
  text-align: right;
  background-color: orange;
  /* padding: 10px 0px 10px 0px; */
  display: flex;
  align-content: end;
  justify-content: flex-end;
}

.nav-link {
  padding: 10px;
  text-decoration: none;
  background-color: green;
}

.nav-link:hover {
  background-color: gray;
}
<header>
    <div id="logo-container"></div>
    
    <nav id="navbar">
      <a class="nav-link" href="#welcome-section">About</a>
      <a class="nav-link" href="#projects">Projects</a>
      <a class="nav-link" href="#contact">Contact</a>
    </nav>
</header>


Есть идеи?

10000