Why styling of main tag not working in my css file

the "main" tag is there. Under the "main" tag, other tags like a paragraph and "divs" are there. In my CSS stylesheet, I gave background-color to the "main" tag expecting that the same background colors will apply all elements under that but it does not get applied to div sections. Why is it so?

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
}

main {
  width: 95%;
  margin: 0 auto;
  background-color: #FF0000;
}

h1 {
  font-size: 300%;
  margin: 0;
  S padding: 0;
}

h1,
h2 {
  text-align: center;
  text-transform: uppercase;
}

.column {
  width: 30%;
  display: inline-block;
  float: left;
  margin-left: 2%;
}
<header>

  <h1>Fluid Measurements</h1>
  <h2>Colleen van Lent</h2>
</header>

<main>
  <!-- Content -->
  <p>What happens when you hardcode the values of your elements? In this case, I have a section that is set to 940px. Each of the content columns is set to 300px. What could go wrong?</p>
  <div class="column">
    <h2>Content</h2>
    <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor
      ligula, eget lacinia odio sem nec elit.</p>
  </div>
  <div class="column">
    <h2>Content</h2>
    <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor
      ligula, eget lacinia odio sem nec elit.</p>
  </div>
  <div class="column">
    <h2>Content</h2>
    <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor
      ligula, eget lacinia odio sem nec elit</p>
  </div>
</main>
<!-- .row -->

Output I am getting is only the immediate paragraph under the "main" tag gets the background color changed and not the "div" sections below that. enter image description here