Missing background colour

user_12506253 0
Viewed 67

I am currently in process of creating a primary navigation menu, but after looking through lots of tutorials I can't seem to fix the piece that is missing on the navigation bar as seen in the picture on the left near the black border.

enter image description here

#mainnav {
  background-color: #4a646c;
  text-align: center;
}

#mainnav li {
  list-style: none;
  display: inline-block;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: inline-block;
  border-right: 1px solid black;
  min-width: 300px;
  text-align: center;
  padding: 10px 16px;
}

#mainnav li:first-child a {
  border-left: 1px solid black;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav .current {
  background-color: #2f4f4f;
}
<nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>

css html
3 Answers

Add the border to your lis and reduce a bit your padding.

#mainnav {
  background-color: #4a646c;
  text-align: center;
}

#mainnav li {
  list-style: none;
  display: inline-block;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: inline-block;
  min-width: 300px;
  text-align: center;
  padding: 10px 13px;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav .current {
  background-color: #2f4f4f;
}
<nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>

user_99424180

I would suggest you go with flex-box instead of the inline-block stuff - and I changed some other styles.

/* RESET */
* {
  box-sizing: border-box;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#mainnav {
  background-color: #4a646c;
}

#mainnav ul {
  display: flex;
  flex-direction: row;
  overflow: scroll;
}

#mainnav li {
  border-right: 1px solid black;
}

#mainnav li:first-of-type {
  border-left: 1px solid black;
}

#mainnav a {
  text-decoration: none;
  color: white;
  display: block;
  min-width: 300px;
  text-align: center;
  padding: 10px 16px;
}

#mainnav a:hover,
#secondary a:hover {
  color: darkorange;
}

#mainnav a.current {
  background-color: #2f4f4f;
}
<nav id="mainnav">
  <ul>
    <li><a href="european_cities.html">Home</a></li>
    <li><a href="#" class="current">Top 4 places</a></li>
    <li><a href="transport.html">Transportation</a></li>
    <li><a href="travel_tips.html">Travel tips</a></li>
  </ul>
</nav>

user_13994560

That happens because you are giving the border only to the first child.
Look below.

#mainnav li:first-child a {
  border-left: 1px solid black;
}

Replace that block for the following:
#mainnav li a { border-left: 1px solid black; }

user_79375110
Related