-1

I am creating a website for fun and I ran into an issue. I would like to display all the links as a continuous line of buttons, but the two buttons "about us" and "contact us" for some reason are still apart even though the other links are being positioned nicely. I know this is probably a very simple fix, but I can't seem to figure it out for some reason.

Here is my HTML code:

header nav .headerbutton {
  text-decoration: none;
  color: white;
  background: black;
  font-family: sans-serif;
  font-weight: 900;
  padding: 10px;
  transition: .2s;
  margin-right: -3.4px;
}

header nav .headerbutton:hover {
  background: red;
}
<header>
  <nav>
    <a href="#" class="headerbutton" id="headerbutton-1">Home</a>
    <a href="#" class="headerbutton" id="headerbutton-2">Playing Cards</a>
    <a href="#" class="headerbutton" id="headerbutton-3">Top 10s</a>
    <a href="#" class="headerbutton" id="headerbutton-4">About Us</a>
    <a href="#" class="headerbutton" id="headerbutton-5">Contact Us</a>
  </nav>
</header>
j08691
  • 204,283
  • 31
  • 260
  • 272
NathanielSantley
  • 299
  • 1
  • 16
  • A space is not exactly `3.4px`, so your negative margin is subject to rounding errors. Just delete the whitespace from your HTML (you should be minifying it anyway) and remove the margin. – Niet the Dark Absol Sep 21 '19 at 20:44
  • 1
    I don't see any difference in spacing on my web browser (currently using Firefox), but I do see the problem on Chrome. – kshetline Sep 21 '19 at 20:45
  • ``(This whitespace)` – kshetline Sep 21 '19 at 20:48
  • I don't even see the problem on Chrome. A good example of CSS being hard, at least when you try pixel manipulation in margins. Follow the advice in one of the answers and definitely use a flexbox for this! – Ray Toal Sep 21 '19 at 20:49

2 Answers2

2

Because your anchors have spaces between them and browsers render that space with inline elements. Your negative margin hides that fact except on the About Us element. You can get rid of that negative margin rule altogether and just remove the spaces between those elements like this:

header nav .headerbutton {
  text-decoration: none;
  color: white;
  background: black;
  font-family: sans-serif;
  font-weight: 900;
  padding: 10px;
  transition: .2s;
}

header nav .headerbutton:hover {
  background: red;
}
<header>
  <nav>
    <a href="#" class="headerbutton" id="headerbutton-1">Home</a><a href="#" class="headerbutton" id="headerbutton-2">Playing Cards</a><a href="#" class="headerbutton" id="headerbutton-3">Top 10s</a><a href="#" class="headerbutton" id="headerbutton-4">About Us</a><a href="#" class="headerbutton" id="headerbutton-5">Contact Us</a>
  </nav>
</header>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • This works, but it looks ugly AF! Is there a different way to do this that actually makes the code decent? – NathanielSantley Sep 21 '19 at 20:57
  • @NathanielSantley https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements – j08691 Sep 21 '19 at 20:58
0

Because you're using a negative margin on each element. Give the nav element a display: flex instead:

header nav .headerbutton {
  text-decoration: none;
  color: white;
  background: black;
  font-family: sans-serif;
  font-weight: 900;
  padding: 10px;
  transition: .2s;
  white-space: pre;
}

header nav .headerbutton:hover {
  background: red;
}

nav{
   display: flex;
}
<header>
  <nav>
    <a href="#" class="headerbutton" id="headerbutton-1">Home</a>
    <a href="#" class="headerbutton" id="headerbutton-2">Playing Cards</a>
    <a href="#" class="headerbutton" id="headerbutton-3">Top 10s</a>
    <a href="#" class="headerbutton" id="headerbutton-4">About Us</a>
    <a href="#" class="headerbutton" id="headerbutton-5">Contact Us</a>
  </nav>
</header>
symlink
  • 11,984
  • 7
  • 29
  • 50
  • 1
    _Because you're using a negative margin on each element_ We can clearly see that, the question was why are there these spaces between the anchors – weegee Sep 21 '19 at 20:47
  • I tried it out and it worked, but I would like an explanation; what does display: flex and white-space: pre actually do? – NathanielSantley Sep 21 '19 at 20:51
  • @weegee because he using negative margins on each element – symlink Sep 21 '19 at 21:00
  • @NathanielSantley: https://developer.mozilla.org/en-US/docs/Web/CSS/flex and https://developer.mozilla.org/en-US/docs/Web/CSS/white-space – symlink Sep 21 '19 at 21:01