Почему не отображается фоновый цвет моего div?

Question

Я в процессе настройки выпадающего меню.Я пытаюсь заставить div .nav_main иметь заданный мной цвет фона в моем CSS, чтобы он соответствовал цвету фона моего меню бургера.Цвет фона .nav_main у меня почему-то не появляется.Я знаю, что это тривиально, но я не могу понять, почему это происходит ...

.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>

Мне интересно, вызывает ли .nav_main a display: none проблему.Если так, как мне обойти это, чтобы div .nav_main background-color появился и заполнил всю ширину страницы?

В основном я хочу, чтобы .nav_main div background-color появился и заполнил всеширина страницы с иконкой бургера, плавающей справа.По сути, я установлю бургер так, чтобы .nav_main a изменил отображение на block.

Answer 1

Я проверил ваш код, и он отлично работает с моей стороны. Что я заметил;

• То, что вы устанавливаете тот же цвет для div, а также для ссылок. Это может быть причиной того, что вы не видите разницы.
• Вы скрываете ссылки с помощью display:none и, следовательно, также не можете определить, какого они цвета.

Возможно, вы захотите запустить код на другом компьютере, чтобы убедиться, что проблема не в вашем компьютере.