My header's background color is not displaying properly-CodePudding

I was using a <div> to separate my header from the body of my webpage. However, in CSS when I tried to set the background colour of that div it didn't work. I tried colouring singular elements of the heading but that didn't work quite right either. I would like to know if anyone knows how to change the background of the div classified as header here in this snippet.

Ignore the repeated <p></p> That's just spacers I made a while ago and didn't bother fixing because I'm lazy.

var $input = document.querySelector('input[type="checkbox"]');
var $$menuLinks = document.querySelectorAll('#menu li');

$$menuLinks.forEach(link => {
  link.addEventListener('click', function() {
    $input.checked = false;
  });
});

header {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #000;
}

body {
  height: 100%;
  font-family: Trebuchet MS;
  margin-bottom: 0;
  margin-top: 0;
  right: 0;
  left: 0;
  padding: 0px;
  font-family: Trebuchet MS;
}

body {
  background-color: #242424;
}

t {
  font-family: Trebuchet MS;
  color: white;
  font-size: 72;
}

h {
  font-family: Trebuchet MS;
  color: white;
  font-size: 32;
}

h2 {
  font-family: Trebuchet MS;
  color: white;
  font-size: 28;
}

p {
  font-family: Trebuchet MS;
  color: white;
  font-size: 22;
}

.b1 {
  font-family: Trebuchet MS;
  background-color: #1553bf;
  color: white;
}

.iframe {
  color: white;
  height: autopx;
  width: autopx;
}

.footer {
  background-color: black;
  text-align: center;
  padding: 10px;
  position: center;
  margin-left: 0px;
  margin-right: 0px margin-bottom: 0;
}

.center {
  text-align: center;
}

.column {
  float: left;
  padding: 10px;
}

.column.side {
  width: 15%;
}

.column.middle {
  width: 70%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column.side,
  column.middle {
    width: 100%;
  }
  .column.side {
    display: none;
  }
}

body {
  height: 100%;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -142px;
}

.page-wrap:after {
  content: "";
  display: block;
}

.footer,
.page-wrape:after {
  height: 142px;
}

p4 {
  background-color: #242424;
  color: #242424;
}

.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #2c2d2e;
  font-family: Helvetica, sans-serif;
}

a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

a:hover {
  background: #3a4299;
}

#menuToggle {
  display: block;
  position: relative;
  top: 70px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: white;
}

#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: black;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked~ul {
  transform: none;
}

<div >
  <div >
    <nav role="navigation">
      <div id="menuToggle">
        <input type="checkbox" />
        <span></span>
        <span></span>
        <span></span>
        <ul id="menu">
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
        </ul>
      </div>
    </nav>
    <center>
      <t>text</t>
      <img src="image" alt="image" height="80" width="80">
    </center>
  </div>
  <p> </p>
  <center>
    <h>text</h>
  </center>
  <div >
    <div >
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
    </div>
    <div >
      <p style="text-indent: 40px">text</p>
      <p style="text-indent: 40px">text</p>
    </div>
    <div >
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
    </div>
  </div>
</div>
<div >
  <p>text</p>
  <p>text</p>
</div>

CodePudding user response：

Your code is fine. But you need to prepend a dot in your header style. .header {...}

Because in your html you use header as class.

 <div >...

CodePudding user response：

Place .header{ your other styles and when place color add background-color: #yourcolor !important; }

CodePudding user response：

The solution I discovered was relatively simple, requiring me to move the 'header' bracket to below the 'body' bracket. I also had to follow @Maik Lowrey's response, renaming my 'header' to '.header'

var $input = document.querySelector('input[type="checkbox"]');
var $$menuLinks = document.querySelectorAll('#menu li');

$$menuLinks.forEach(link => {
  link.addEventListener('click', function() {
    $input.checked = false;
  });
});

body {
  height: 100%;
  font-family: Trebuchet MS;
  margin-bottom: 0;
  margin-top: 0;
  right: 0;
  left: 0;
  padding: 0px;
  font-family: Trebuchet MS;
  background-color: #242424;
}

.header {
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
  background-color: black;
}

t {
  font-family: Trebuchet MS;
  color: white;
  font-size: 72;
}

h {
  font-family: Trebuchet MS;
  color: white;
  font-size: 32;
}

h2 {
  font-family: Trebuchet MS;
  color: white;
  font-size: 28;
}

p {
  font-family: Trebuchet MS;
  color: white;
  font-size: 22;
}

.b1 {
  font-family: Trebuchet MS;
  background-color: #1553bf;
  color: white;
}

.iframe {
  color: white;
  height: autopx;
  width: autopx;
}

.footer {
  background-color: black;
  text-align: center;
  padding: 10px;
  position: center;
  margin-left: 0px;
  margin-right: 0px margin-bottom: 0;
}

.center {
  text-align: center;
}

.column {
  float: left;
  padding: 10px;
}

.column.side {
  width: 15%;
}

.column.middle {
  width: 70%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column.side,
  column.middle {
    width: 100%;
  }
  .column.side {
    display: none;
  }
}

body {
  height: 100%;
}

.page-wrap {
  min-height: 100%;
  margin-bottom: -142px;
}

.page-wrap:after {
  content: "";
  display: block;
}

.footer,
.page-wrape:after {
  height: 142px;
}

p4 {
  background-color: #242424;
  color: #242424;
}

.centerimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

body {
  margin: 0;
  padding: 0;
  background-color: #2c2d2e;
  font-family: Helvetica, sans-serif;
}

a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s ease;
}

a:hover {
  background: #3a4299;
}

#menuToggle {
  display: block;
  position: relative;
  top: 70px;
  left: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
  -webkit-touch-callout: none;
}

#menuToggle span {
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;
  background: #fff;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}

#menuToggle span:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked~span {
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: white;
}

#menuToggle input:checked~span:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
  transform: rotate(-45deg) translate(0, -1px);
}

#menu {
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background: black;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
  padding: 10px 0;
  font-size: 22px;
}

#menuToggle input:checked~ul {
  transform: none;
}

<div >
  <div >
    <nav role="navigation">
      <div id="menuToggle">
        <input type="checkbox" />
        <span></span>
        <span></span>
        <span></span>
        <ul id="menu">
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
          <a href="page">
            <li>text</li>
          </a>
        </ul>
      </div>
    </nav>
    <center>
      <t>text</t>
      <img src="image" alt="image" height="80" width="80">
    </center>
  </div>
  <p> </p>
  <center>
    <h>text</h>
  </center>
  <div >
    <div >
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
    </div>
    <div >
      <p style="text-indent: 40px">text</p>
      <p style="text-indent: 40px">text</p>
    </div>
    <div >
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
      <p>‎</p>
    </div>
  </div>
</div>
<div >
  <p>text</p>
  <p>text</p>
</div>