navbar with 0 space before

Question

I just started doing a navbar and there is a space before first item and I can't get delete it. I tried with margin 0 and padding 0 on .navbar a, didn't work

I'm sure I'm missing something :D

.navbar {
  list-style-type: none;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  height: 50px;
}

.navbar a {
  text-decoration: none;
  color: gray;
  padding: 17px;
  transition: background-color 0.5s linear;
}

.navbar a:hover {
  background-color: green;
  color: honeydew;
}

body {
  margin: 0;
}

<header>
  <nav>
    <ul class='navbar'>
      <li><a href='#home'>Home</a></li>
      <li><a href='#download'>Download</a></li>
      <li><a href='#register'>Register</a></li>
      <li><a href='#contact'>Contact</a></li>
      <li><a href='#FAQ'>FAQ</a></li>
    </ul>
  </nav>
</header>

you can try to add `padding: 0;` to body and `margin: 0; padding: 0;` to `.navbar li` and maybe `.navbar ul` Edit: Try to add `padding-left: 0` to `.navbar a:first-of-type` too — L. Männer, Jan 29 '20 at 13:50

Tony S · Accepted Answer · 2020-01-29T13:53:57.433

3

Add padding: 0; to .navbar in your style.

The space is created by the ul element, not the lielements.

.navbar {
  list-style-type: none;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  height: 50px;
  padding: 0; /* <--- here */
}

edited Jan 29 '20 at 13:53

answered Jan 29 '20 at 13:48

Tony S

491
6
26

lol was that easy, thanks! – Gabriel Daniel Jan 29 '20 at 13:52
@GabrielDaniel Please don't forget to `validate` an answer and `upvote` **all** usefull answer ;) – johannchopin Jan 29 '20 at 13:56
i don't forget, it's just a deelay – Gabriel Daniel Jan 29 '20 at 13:58

score 2 · Answer 2 · answered Jan 29 '20 at 13:51

It's tag ul has padding, in your case add padding: 0; to your .navbar

.navbar {
  list-style-type: none;
  background-color: black;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0;
  height: 50px;
  padding: 0;
}

.navbar a {
  text-decoration: none;
  color: gray;
  padding: 17px;
  transition: background-color 0.5s linear;
}

.navbar a:hover {
  background-color: green;
  color: honeydew;
}

body {
  margin: 0;
}

<header>
  <nav>
    <ul class='navbar'>
      <li><a href='#home'>Home</a></li>
      <li><a href='#download'>Download</a></li>
      <li><a href='#register'>Register</a></li>
      <li><a href='#contact'>Contact</a></li>
      <li><a href='#FAQ'>FAQ</a></li>
    </ul>
  </nav>
</header>

score 2 · Answer 3 · answered Jan 29 '20 at 13:52

ul element in html have naturally a padding-left css rule set to 40px. Since your .navbar is actually a ul element you will have to remove it:

.navbar {
    list-style-type: none;
    background-color: black;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 0;
    height: 50px;
    padding-left: 0;    /* <-- Reset padding-left from ul */
}

.navbar a {
    text-decoration: none;
    color: gray;
    padding: 17px;
    transition: background-color 0.5s linear;
}

.navbar a:hover {
    background-color: green;
    color: honeydew;
}

body {
    margin: 0;
}

<header>
    <nav>
        <ul class='navbar'>
            <li><a href='#home'>Home</a></li>
            <li><a href='#download'>Download</a></li>
            <li><a href='#register'>Register</a></li>
            <li><a href='#contact'>Contact</a></li>
            <li><a href='#FAQ'>FAQ</a></li>
        </ul>
    </nav>
</header>

navbar with 0 space before

3 Answers3