Why can't I set a background-color for my navbar?

Question

I've been trying to set a background color for my navbar and somehow my code isn't working. Here's the HTML & CSS used:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: red;
}

li {
  float: right;
}

a {
  display: block;
  padding: 8px;
}

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">News</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

I also tried adding background-color property to a nav selector.

score 0 · Accepted Answer · answered Jul 23 '21 at 07:42

What cause you problem is the float:right property that prevent your ul from having a width

You could use display: flex

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: red;
  display: flex;
  justify-content: flex-end;
}

a {
  display: block;
  padding: 8px;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Why can't I set a background-color for my navbar?

1 Answers1