Why can't I change the background color of the navBar div

February 6, 2023

I am trying to change the background color of the navBar div to black but it doesn’t do anything when I try and set it. The reset.css is added at the bottom of the css snippet. I have tried many things to fix it and im not sure what causes it. If you could explain why it is not working in your answer that would be great.

#navBar {
  background-color: black;
}

#liL {
  float: left;
  margin: 10px 0 0 50px;
}

.liR {
  float: right;
  margin: 60px 50px 0 0;
}

.linkNav {
  text-decoration: none;
  color: black;
  font-family: Helvetica;
  font-weight: 100;
}

#logo {
  height: 100px;
}


/* CSS reset */

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset,
img {
  border: 0;
}

input {
  border: 1px solid #b0b0b0;
  padding: 3px 5px 4px;
  color: #979797;
  width: 190px;
}

address,
caption,
cite,
code,
dfn,
th,
var {
  font-style: normal;
  font-weight: normal;
}

ol,
ul {
  list-style: none;
}

caption,
th {
  text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

q:before,
q:after {
  content: '';
}

abbr,
acronym {
  border: 0;
}

<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <div id="navBar">
    <ul id="ulNav">
      <li id="liL"><img id="logo" src="#"></li>
      <li class="liR"><a class="linkNav" href="#">Menu</a></li>
      <li class="liR"><a class="linkNav" href="#">Locations</a></li>
      <li class="liR"><a class="linkNav" href="#">Contact</a></li>
      <li class="liR"><a class="linkNav" href="#">About us</a></li>
    </ul>
  </div>
  <script src="" async defer></script>
</body>

</html>

>Solution :

If you insist on using floats you need to give the ul element some height.
One way to achieve this is to use the overflow property.

This makes sure the ul grows vertically to include its children:

#ulNav {
  overflow: hidden;
}

But as already mentioned, it’s best to use an alternative method, like flexbox, because floats were never meant for building layouts and can be elegantly substituted with the modern flex/grid.