Sizing content - HTML/CSS

Question

I've just started learning Responsive Web Design therefore I am still a noob in it. I've made a basic site that contains 5 sections, each one has different color and text. The problem is that when I make my google window smaller, the width of the dark blue section doesn't adjust to the window size, there is some of it's content left on the right side of the google window which creates a horizontal scrollbar. Any idea on how to fix this?

/* general */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding: 25px;
  background: #f7f6d3;
}


/* layout */

.wrap {
  width: 1024px;
  margin: 0 auto;
}

section {
  color: #fff;
  font: 16px/22px Rockwell, "Courier Bold", Courier, Georgia, serif;
  background: #9F3FA3;
  border-radius: 9px;
  margin-bottom: 25px;
  padding: 20px;
  float: left;
  width: 19.53%;
  margin-right: 6px;
  min-height: 300px;
}

section:nth-child(1) {
  background: #3b9ae1;
}

section:nth-child(2) {
  background: #f6be00;
}

section:nth-child(3) {
  background: #e64134;
}

section:nth-child(4) {
  background: #eb70b1;
}

section:nth-child(5) {
  background: #0f1a5f;
  margin-right: 0;
}


/* clearfix */

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after {
  clear: both;
}

@media screen and (max-width: 820px) {
  section {
    width: 49.5%;
    margin-bottom: 1%;
    min-height: 200px;
  }
  section:nth-child(1),
  section:nth-child(2) {
    margin-right: 0;
  }
  section:nth-child(3) {
    width: 100%;
  }
}

@media screen and (max-width: 560px) {
  section {
    margin-right: 0;
    width: 100%;
    float: none;
    min-height: 0;
  }
}

<div class="wrap group">
  <section>
    Finn is a silly kid who wants to become a great hero one day. He might not look too tough, but if there's evil around, he'll slay it. That's his deal.
  </section>
  <section>
    Finn's best friend is a wise, old dog with a big heart. Jake has the magical ability to stretch and grow. When evil's not running amok, he plays viola with his girlfriend, Lady Rainicorn.
  </section>
  <section>
    Armed with a magic crown and an icy heart, the Ice King has only one goal: to secure a wife by any means necessary.
  </section>
  <section>
    As a millionaire nerd enthusiast, Princess Bubblegum immerses herself in every branch of geekdom from rocket science to turtle farming.
  </section>
  <section>
    Marceline is a wild rocker girl. Centuries of wandering the Land of Ooo have made her a fearless daredevil.
  </section>
</div>

Answer 1

This is because you have set the width of your .wrap explicitly. Because of that, the div will always take the same width and generate scrollbars if there is not enough space. The snippet below works correctly (changed the .wrap selector).

/* general */

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  padding: 25px;
  background: #f7f6d3;
}


/* layout */

.wrap {
  max-width: 1024px;
  margin: 0 auto;
  width:100%;
}

section {
  color: #fff;
  font: 16px/22px Rockwell, "Courier Bold", Courier, Georgia, serif;
  background: #9F3FA3;
  border-radius: 9px;
  margin-bottom: 25px;
  padding: 20px;
  float: left;
  width: 19.53%;
  margin-right: 6px;
  min-height: 300px;
}

section:nth-child(1) {
  background: #3b9ae1;
}

section:nth-child(2) {
  background: #f6be00;
}

section:nth-child(3) {
  background: #e64134;
}

section:nth-child(4) {
  background: #eb70b1;
}

section:nth-child(5) {
  background: #0f1a5f;
  margin-right: 0;
}


/* clearfix */

.group:before,
.group:after {
  content: " ";
  display: table;
}

.group:after {
  clear: both;
}

@media screen and (max-width: 820px) {
  section {
    width: 49.5%;
    margin-bottom: 1%;
    min-height: 200px;
  }
  section:nth-child(1),
  section:nth-child(2) {
    margin-right: 0;
  }
  section:nth-child(3) {
    width: 100%;
  }
}

@media screen and (max-width: 560px) {
  section {
    margin-right: 0;
    width: 100%;
    float: none;
    min-height: 0;
  }
}

<div class="wrap group">
  <section>
    Finn is a silly kid who wants to become a great hero one day. He might not look too tough, but if there's evil around, he'll slay it. That's his deal.
  </section>
  <section>
    Finn's best friend is a wise, old dog with a big heart. Jake has the magical ability to stretch and grow. When evil's not running amok, he plays viola with his girlfriend, Lady Rainicorn.
  </section>
  <section>
    Armed with a magic crown and an icy heart, the Ice King has only one goal: to secure a wife by any means necessary.
  </section>
  <section>
    As a millionaire nerd enthusiast, Princess Bubblegum immerses herself in every branch of geekdom from rocket science to turtle farming.
  </section>
  <section>
    Marceline is a wild rocker girl. Centuries of wandering the Land of Ooo have made her a fearless daredevil.
  </section>
</div>