p element inside div is wider than the parent div

Update your .dialog-box:

.dialog-box p {
    display: block;
    margin:10% 14%;
    width: 200px;
    word-wrap: wrap;
    word-break: break-all;
    padding-top: 30px;
}

3 things to do here:

1. display: inline does not work in your case; you have to use the width & height of p element
2. You have to wrap & break the words using word-wrap and word-break
3. You probably need to place the words inside the green dialog, using padding-top

Side note:

There is no point to set margin with so many decimal places. Use integers only.

Demo: http://jsfiddle.net/9bpyjnfL/1/

It happens because you put text without any whitespaces in it, so browser is not sure how to break those long line. You can instruct it with word-wrap property:

.dialog-box {
    /* ... */
    word-wrap: break-word;
}

Demo: http://jsfiddle.net/2y1wj0mm/1/