-1

picture of navbar

I would like to know how to fix this issue I have tried everything that I can think of. Any help would be great. all my paddings and margins are set to zero or auto. nothing that is obvious to me is causing the issue, I have tried first and last child float left and right but this did not work. 

#nav {
  text-align: center;
  margin: 0;
  overflow: hidden;
  display: block;
}

#nav ul {
  margin: auto;
  padding: 0;
  font-size: 100%;
  list-style: none;
  list-style-type: none;
}

#nav ul li {
  display: inline-block;
}

#nav a {
  transition: 0.3s;
  background-color: #fff;
}

#nav ul li a {
  text-decoration: none;
  padding: 10px 30px;
  display: block;
  color: #000000;
  background-color: red;
}

#nav a:hover {
  color: #fff;
  background-color: red;
}

#nav .active {
  background-color: red;
  color: #000000;
}
<div id="nav">
  <ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contact</a></li>
  </ul>
</div>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Joshua Robson
  • 1
  • Your html for nav? – Kiran Shinde Feb 18 '20 at 08:20
  • 1
    By default `inline-block` elements have a space between them, i'd suggest you to work with `display: flex` or `display: grid` for your nav. – Daniel Feb 18 '20 at 08:22
  • Please post the html for your navbar, and consider to use flexbox. – Sfili_81 Feb 18 '20 at 08:23
  • Inline blocks add a single whitespace in between each other, this atricle should tell you everything! [Fighting the Space Between Inline Block Elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/) – AlexG Feb 18 '20 at 09:04

1 Answers1

-1

I just added 'display: flex' to #nav ul.

Please check this fiddle https://jsfiddle.net/smilingpigs/ar1h8ynq/5/

nav {
  text-align: center;
  margin: 0;
  overflow: hidden;
  display: block;
}

nav ul {
  margin: auto;
  padding: 0;
  display: flex;
  font-size: 100%;
  list-style: none;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
}

nav a {
  transition: 0.3s;
  background-color: #fff;
}

nav ul li a {
  text-decoration: none;
  padding: 10px 30px;
  display: flex;
  color: #000000;
  background-color: red;
}

nav a:hover {
  color: #fff;
  background-color: red;
}

nav .active {
  background-color: red;
  color: #000000;
}
<nav>
  <ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Ajaiprakash J
  • 1
  • 2