Why won't the background-color of my div appear?

Question

I'm in process of setting up a drop down menu. I'm trying to get the div .nav_main to have the background-color I've given it in my CSS so that it matches the background-color of my burger menu. The .nav_main background-color doesn't show up for me for some reason. I know it's trivial but I can't figure out why this is happening...

.nav_main {
  display: block;
  width: 100%;
  background-color: #282828;
}

.nav_main a {
  display: none;
  width: 100%;
  background-color: #282828;
  text-decoration: none;
  height: 100%;
  padding-top: 32px;
  padding-bottom: 32px;
  margin: 0;
  text-align: center;
  font-size: 50px;
  color: #fff;
}

.nav_main a:last-child {
  display: inline-block;
  width: auto;
}

<header>
  <h1>Facilities Portal</h1>
  <div class="nav_main">
    <a class="activeNav" href="index.html">Facilities Info</a>
    <a href="logaction.html">Log Action</a>
    <a href="viewaction.html">View Actions</a>
    <a href="keysystem.html">Key System</a>
    <a id="burgerIcon" class="icon" onclick="#">&#9776;</a>
  </div>
</header>

I'm wondering if the .nav_main a display: none is causing the issue. If so how do I get around this so the div .nav_main background-color appears and fills the entire width of the page?

Basically I want .nav_main div background-color to appear and fill out the entire width of the page with the burger icon floating to the right. Essentially I'll set the burger up to make .nav_main a display change to block.

Answer 1

I have tested your code and it works just fine on my end. What I noticed;

• That you are setting the same color for the div as well as the links. This might be the reason you are not seeing a difference.
• You are hiding the links with display:none and hence might also not be able to tell which color they are.

You might want to run the code on another machine to make sure the issue is not with your machine.