h1 tag smaller than h2, all inside a section tag

Question

My h1 tag, which is inside a section tag, is smaller than an h2 tag. The h1 tag was the correct size when out side the section tag. I keep looking through my CSS page and am finding nothing that would make this happen.

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background-color: #42413C;
  margin: 0;
  padding: 0;
  color: #000;
  background-image: url(images/mass_effect_1_citadel_dreamscene_by_droot1986-d5sw7hu.jpg);
}

a img {
  border: none;
}

.container {
  width: 960px;
  background-color: #192370;
  margin: 0 auto;
}

header {
  background-color: #050a2e;
}

.sidebar1 {
  float: left;
  width: 175px;
  background-color: #2236d1;
  padding-bottom: 10px;
  border: solid thin black;
  text-align: center;
}

.content {
  padding: 10px 0;
  width: 780px;
  float: right;
  border: solid thin black;
}

footer {
  padding: 10px 0;
  background-color: #050a2e;
  position: relative;
  clear: both;
  text-align: center;
}

header,
section,
footer,
aside,
article,
figure {
  display: block;
  color: white;
}

a:link {
  text-decoration: none;
  color: #d1bd22;
  font-size: 1.3em;
}

a:visited {
  text-decoration: none;
  color: white;
  font-size: 1.3em;
}

a:hover {
  text-decoration: underline;
  color: #d1bd22;
  font-size: 1.3em;
}

a:active {
  text-decoration: underline;
  color: white;
  font-size: 1.3em;
}

<h1>H1 Outside section</h1>
<h2>H2 Outside section</h2>
<section>
  <h1>H1 Inside section</h1>
  <h2>H2 Inside section</h2>
  <section>
    <h1>H1 Inside nested section</h1>
    <h2>H2 Inside nested section</h2>
  </section>
</section>

Answer 1

If you test the situation without your style sheet, you will see that h1 inside a section element appears in a smaller font. This is caused by a browser style sheet, in browsers that support section and its suggested rendering in HTML5. The section element has been defined so that within it, an h1 element is a heading for the section, so relative to the page as a whole, it is at the 2nd level (or even at a lower level, if section elements have been nested).

There are various opinions on the adequacy of that approach, but that’s what HTML5 drafts say and what some browsers have implemented. On the other hand, old browsers ignore such rules, so the approach is not practically robust. It is safer (and quite acceptable according to HTML5) to use h2 for section headings.