How would I remove those small gaps on the bottom and right side of the navbar elements?

Question

I'm trying to remove those small gaps between my nav-link elements and navbar on the bottom as well as on the right side, but can't seem to figure out. I tried setting min-height: 0 and changing it to display: flex and tweaking the justify-content and align-items properties, but didn't achieve the desired outcome. How else could I make it work?

Here is the screenshot:

Here is my code:

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>

score 2 · Accepted Answer · answered Feb 12 '20 at 12:23

2

Replace this 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;

}

answered Feb 12 '20 at 12:23

Mehul Davara

321
2
4

score 1 · Answer 2 · answered Feb 12 '20 at 12:22

Using flex with justify-content: flex-end; we can achieve desire result

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>

How would I remove those small gaps on the bottom and right side of the navbar elements?

2 Answers2