Content going out of container when padding has been added

Question

I am having an issue with content going outside of a container. It is happening in the service_description area of my code. I have padding set vertically and horizontally for the description. The vertical padding is taking place just not the horizontal.

To make the description come out just click in one of the boxes and then you will see what I am referring to. I want all of the content to remain in that box.

Why is this doing this when I have padding set?

$('.service_wrapper').click(function() {
  var thisDescription = $('.service_description', $(this));
  $('.service_description').not(thisDescription).hide().parent().removeClass('closed');
  thisDescription.slideToggle(500).parent().toggleClass('closed');
});

.page_wrap {
  margin: 15px 10%
}
.left_service_wrap {
  float: left;
  width: 40%;
  margin-left: 5%;
}
.service_wrapper {
  margin-left: 25%;
  border: 1px solid black;
  margin: 15px 0;
  width: 80%;
}
.service_list {
  margin-left: 20%;
}
.service_title {
  padding: 15px 12px;
  margin: 0;
  font-weight: bold;
  font-size: 1em;
}
.service_title:before {
  content: '';
  background: url('https://i.sstatic.net/GC7i2.png') 0 0 / 10px 10px no-repeat;
  width: 10px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  padding-right: 6px;
}
.closed .service_title:before {
  background-image: url('https://i.sstatic.net/ma4L4.png');
}
.service_title:hover {
  background-color: gray;
  color: blue;
  cursor: pointer;
}
.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page_wrap">
  <div class="left_service_wrap">
    <div class="service_list">
      <div class="service_wrapper">
        <div class="service_title">Flooring</div>
        <div class="service_description">The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        </div>
      </div>
      <div class="service_wrapper">
        <div class="service_title">Roofing</div>
        <div class="service_description">Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
          ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
        </div>
      </div>
    </div>

Answer 1

Add word-wrap and box-sizing to your .service_decription:

.service_description {
        box-sizing: border-box;
        word-wrap: break-word;
        display: none;
        font-size: 0.9em;
        margin-top: 10px;
        padding: 8px 14px;
        width: 100%;
      }

 $('.service_wrapper').click(function() {
      var thisDescription = $('.service_description', $(this));
      $('.service_description').not(thisDescription).hide().parent().removeClass('closed');
      thisDescription.slideToggle(500).parent().toggleClass('closed');
    });

    .page_wrap {
      margin: 15px 10%
    }
    .left_service_wrap {
      float: left;
      width: 40%;
      margin-left: 5%;
    }
    .service_wrapper {
      margin-left: 25%;
      border: 1px solid black;
      margin: 15px 0;
      width: 80%;
    }
    .service_list {
      margin-left: 20%;
    }
    .service_title {
      padding: 15px 12px;
      margin: 0;
      font-weight: bold;
      font-size: 1em;
    }
    .service_title:before {
      content: '';
      background: url('https://i.sstatic.net/GC7i2.png') 0 0 / 10px 10px no-repeat;
      width: 10px;
      height: 10px;
      display: inline-block;
      vertical-align: middle;
      padding-right: 6px;
    }
    .closed .service_title:before {
      background-image: url('https://i.sstatic.net/ma4L4.png');
    }
    .service_title:hover {
      background-color: gray;
      color: blue;
      cursor: pointer;
    }
    .service_description {
        box-sizing: border-box;
        word-wrap: break-word;
        display: none;
        font-size: 0.9em;
        margin-top: 10px;
        padding: 8px 14px;
        width: 100%;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="page_wrap">
      <div class="left_service_wrap">
        <div class="service_list">
          <div class="service_wrapper">
            <div class="service_title">Flooring</div>
            <div class="service_description">The best floors! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
              ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
          </div>
          <div class="service_wrapper">
            <div class="service_title">Roofing</div>
            <div class="service_description">Your roof will be perfect! gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
              ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg gggggggggggggggggggggg gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg ggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
            </div>
          </div>
        </div>

Answer 2

You can add word-wrap to your .service_description class which should break the words onto a new line when it reaches the end of the container.

.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%; /* Probably should remove this as well */
  margin-top: 10px;
  font-size: .9em;
  word-wrap: break-word;
}

Answer 3

the "words" are too long i.e. longer than a full line), but in real life you'll never have words that long...

EDIT / addition:

And here:

.service_description {
  display: none;
  padding: 8px 14px;
  width: 100%;
  margin-top: 10px;
  font-size: .9em;
}

the 100% width adds up with 2 x 14 px padding (i.e. real width is 100% plus 28px). Add box-sizing: border-box; to that rule to include the padding in the width.

Answer 4

use:

.service_wrapper { overflow:hidden; }

I hope this helps.