title: Error in adding background color to section in HTML/CSS
body: <p>I am trying to add a dark background color to the newsletter section of this website using CSS. Instead nearly the entire page displays the background color. I've checked the the HTML document to make sure I mistakenly left a div or section open, but have found nothing.
    Can anyone tell me why my 75% of my page is being recognized as the "newsletter" section?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Will prevent padding from affecting the width of our columns */
  * {
      box-sizing: border-box;
  }
  
  html, body {
      font-family: 'Open Sans',sans-serf;
  }
  
  .clearfix:before, .clearfix:after {
      content: " ";
      display: table;
  }
  
  /* Prevents floating elements on either side. */
  .clearfix:after {
      clear: both;
  }
  
  .wrapper {
      width: 1440px;
      max-width: 90%;
      margin: 0 auto;
  }
  
  h1, h2, h3, h4, h5, h6 {
      font-weight: 300;
  }
  
  /* Header */
  #top_header {
      padding: 1.5em 0;
  }
  
  #top_header .logo {
      float: left;
      text-transform: uppercase;
      font-size: 1.15em;
      font-weight: 700;
  }
  
  #top_header .logo span {
      font-weight: 300;
      color: #73e298;
  }
  
  #top_header #main_nav {
      float: right;
      font-size: .9em;
      padding-top: 1em;
  }
  
  #top_header #main_nav a {
      color: #8b8b9f;
      text-decoration: none;
      margin-left: 1em;
  }
  
  #banner {
      background: url(../images/banner_background.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      width:100%;
      padding: 6.5em, 0;
  }
  
  #banner #banner_content_wrapper {
      width: 900px;
      max-width: 90%;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center
  }
  
  #poster {
      width: 275px;
      position: relative;
      float: left;
  }
  
  #poster .featured_image {
      width: 100%;
      max-width: 100%;
      border-radius: .5em;
      -webkit-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
      -moz-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
      box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
  }
  
  /* Moves play button to center of poster image */
  #poster .play_button {
      position: absolute;
      width: 80px;
      left: 50%;
      top: 50%;
      margin: -40px 0 0 -40px;
  }
  /* Moves Deadpool movie info to the right of the image. With better spacing */
  #content {
          float: left;
          width: 500px;
          margin-left: 100px;
   }
  
  /* Changes Deadpool title to white, increases font size, and adjusts spacing in the display*/
  #content .title {
          display: inline;
          font-size: 1.75em;
          color: #FFFFFF;
  }
  
  /* Rating system now side by side with title instead of below.*/
  #content .ratings {
          display: inline;
          margin-left: 1em;
  }
  
  /* Adds color and increases size of stars */
  #content .ratings i {
          color: #73e298;
          font-size: 1.35em;
          margin: 0 .15em;
  }
  
  /* Changes last star to a grey color */
  #content .ratings .inactive {
          color: #48494d;
  }
  
  /* Changes description color to white which shows up better with the background. Double spaces description as well.*/
  .description {
          color: #bbbebf;
          font-size: 1em;
          line-height: 2;
  }
  
  
  .info {
          color: #FFFFFF;
          font-size: .8em;
          font-weight: 700;
          margin-top: 3em;
  }
  
  .info span {
          margin: 0 .5em;
  
  }
  
  
  .row {
          width: 100%
  }
  
  /* Organizes images horizontally */
  .post {
          width: 14%; /* 100% /6(images) -2.5% */
          float: left;
          margin-right: 2.5%;
  }
  
  /* Shrinks images to playing card size. Adds space to images */
  .post img {
              width: 100%;
              max-width: 100%;
              border-radius: .5em;
  }
  
  
  .post .title {
              font-size: 1.25em;
              margin: 1em 0 0 0;
              color:#252529;
  }
  
  /* Lightens the rating and mins. Slight size and margin adjustment */
  .post_info {
              font-size: .75em;
              color: #8b8b9f;
              margin: 0.5em 0;
  }
  
  
  /* Better spacing between top movies and top shows*/
  #top_movies, #top_shows {
      padding: 5em 0;
  }
  
  #top_movies, #top_shows header {
      padding: 0 0 1.5em 0;
  }
  
  #top_movies, #top_shows header h2, .view_more {
      display: inline;
  }
  
  #top_movies, #top_shows h2 {
      font-size: 1.75em;
  }
  
  #top_movies, #top_shows, .view_more {
      float: right;
      font-size: .8em;
      margin: .75em 3.5% 0 0;
  }
  
  /*Adds border between popular movies and tv sections*/
  #top_movies {
      border-bottom: 1px solid #d4d4d4;
  }
  
   #newsletter {
      padding: 5em 0;
      text-align: center;
      background: #2a2a2e;
  }
  
  #newsletter .newsletter_inner{
      width: 600px;
      margin: 0 auto;
  }
  
  #newsletter h2 {
          font-size: 1.75em;
          color:#FFFFFF;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Movies &amp;amp; TV | Dan Mayle &lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css'&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/styles.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;!--Header including navigation bar--&gt;
      &lt;header id="top_header" class="clearfix"&gt;
          &lt;div class="wrapper"&gt;
              &lt;h1 class="logo"&gt;Movies&lt;span&gt;&amp;amp;&lt;/span&gt;TV&lt;/h1&gt;
              &lt;nav id="main_nav"&gt;
                  &lt;a href="#"&gt;Movies&lt;/a&gt;
                  &lt;a href="#"&gt;TV Shows&lt;/a&gt;
                  &lt;a href="#"&gt;Celebs &amp;amp; Photos&lt;/a&gt;
                  &lt;a href="#"&gt;News&lt;/a&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;section id="banner" class="clearfix"&gt;
          &lt;div id="banner_content_wrapper"&gt;
              &lt;div id="poster"&gt;
                  &lt;img src="images/movies/deadpool.jpg" alt="Deadpool Movie Poster" class="featured_image"&gt;
                  &lt;img src="images/play_button.png" alt="Play Trailer" class="play_button"&gt;
              &lt;/div&gt;
              &lt;div id="content"&gt;
                  &lt;h2 class="title"&gt;Deadpool&lt;/h2&gt;
                  &lt;div class="ratings"&gt;
                      &lt;i class="fa fa-star"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-star"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-star"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-star"&gt;&lt;/i&gt;
                      &lt;i class="fa fa-star inactive"&gt;&lt;/i&gt;
                  &lt;/div&gt;
  
                  &lt;p class="description"&gt;A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.&lt;/p&gt;
  
                  &lt;p class="info"&gt;R &lt;span&gt;|&lt;/span&gt; 108 min &lt;span&gt;|&lt;/span&gt; Action, Adventure, Comedy &lt;span&gt;|&lt;/span&gt; 12 February 2016&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section id="top_movies" class="clearfix"&gt;
          &lt;div class="wrapper"&gt;
              &lt;header class="clearfix"&gt;
                  &lt;h2&gt;Popular Movies&lt;/h2&gt;
                  &lt;p class="view_more"&gt;View All Movies&lt;/p&gt;
              &lt;/header&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/movies/the-martian.jpg" alt="The Martian"&gt;
                      &lt;h3 class="title"&gt;The Martian&lt;/h3&gt;
                      &lt;p class="post_info"&gt;PG13 | 144 Minutes&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/movies/inside-out.jpg" alt="Inside Out"&gt;
                      &lt;h3 class="title"&gt;Inside Out&lt;/h3&gt;
                      &lt;p class="post_info"&gt;PG | 95 Minutes&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/movies/jurassic-world.jpg" alt="Jurassic World"&gt;
                      &lt;h3 class="title"&gt;Jurassic World&lt;/h3&gt;
                      &lt;p class="post_info"&gt;PG13 | 124 Minutes&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/movies/mad-max.jpg" alt="Mad Max"&gt;
                      &lt;h3 class="title"&gt;Mad Max: Fury Road&lt;/h3&gt;
                      &lt;p class="post_info"&gt;R | 120 Minutes&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/movies/star-wars.jpg" alt="Star Wars"&gt;
                      &lt;h3 class="title"&gt;Star Wars: The Force Awakens&lt;/h3&gt;
                      &lt;p class="post_info"&gt;PG13 | 109 Minutes&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/movies/avengers.jpg" alt="The Avengers"&gt;
                      &lt;h3 class="title"&gt;Avengers: Age Of Ultron&lt;/h3&gt;
                      &lt;p class="post_info"&gt;PG13 | 141 Minutes&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;section id="top_shows" class="clearfix"&gt;
          &lt;div class="wrapper"&gt;
              &lt;header class="clearfix"&gt;
                  &lt;h2&gt;Popular Shows&lt;/h2&gt;
                  &lt;p class="view_more"&gt;View All Shows&lt;/p&gt;
              &lt;/header&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/tv_shows/walking-dead.jpg" alt="The Walking Dead"&gt;
                      &lt;h3 class="title"&gt;The Walking Dead&lt;/h3&gt;
                      &lt;p class="post_info"&gt;TV-MA | Season 4&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/tv_shows/game-of-thrones.jpg" alt="Game Of Thrones"&gt;
                      &lt;h3 class="title"&gt;Game Of Thrones&lt;/h3&gt;
                      &lt;p class="post_info"&gt;TV-MA | Season 6&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/tv_shows/breaking-bad.jpg" alt="Breaking Bad"&gt;
                      &lt;h3 class="title"&gt;Breaking Bad&lt;/h3&gt;
                      &lt;p class="post_info"&gt;TV-MA | Season 5&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/tv_shows/empire.jpg" alt="Empire"&gt;
                      &lt;h3 class="title"&gt;Empire&lt;/h3&gt;
                      &lt;p class="post_info"&gt;TV-14 | Season 2&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/tv_shows/master-of-none.jpg" alt="Master of None"&gt;
                      &lt;h3 class="title"&gt;Master of None&lt;/h3&gt;
                      &lt;p class="post_info"&gt;TV-MA | Season 1&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="post"&gt;
                      &lt;img src="images/tv_shows/mr-robot.jpg" alt="Mr Robot"&gt;
                      &lt;h3 class="title"&gt;Mr Robot&lt;/h3&gt;
                      &lt;p class="post_info"&gt;TV-14 | Season 1&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/section&gt;
  
  
      &lt;section id="newsletter"&gt;
          &lt;div class="newsletter_inner"&gt;
              &lt;h2&gt;Get the best Movie &amp;amp; TV Show trailers straight in your inbox each week.&lt;/h2&gt;
              &lt;div class="sign_up_form"&gt;
                  &lt;input type="text" placeholder="First Name"&gt;
                  &lt;input type="email" placeholder="Email Address"&gt;
                  &lt;button class="button"&gt;Subscribe&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
  
      &lt;footer id="main_footer"&gt;
          &lt;p class="logo"&gt;Movies&lt;span&gt;&amp;amp;&lt;/span&gt;Stuff&lt;/p&gt;
          &lt;p class="copyright"&gt;&amp;copy;2016 Movies &amp;amp; Stuff. All Rights Reserved.&lt;/p&gt;
          &lt;div class="links"&gt;
              &lt;a href="#"&gt;Terms of Service&lt;/a&gt;
              &lt;a href="#"&gt;Privacy Policy&lt;/a&gt;
          &lt;/div&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>