nested Div tag not enclosed by parent Div

Question

So I am trying to make a box with 4 div boxes inside it. The 4 sub div boxes are all on the same horizontal axes. It looks fine except the outside border from the parent div is just a line on the top for some reason. So the children divs I think are not inside the parent. I think I messed up something in the css. HTML:

<div class="summaryBox">
        <div class="img1">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
        <div class="sum1">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
        <div class="img2">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
        <div class="sum2">
            <p>dasfafgafdgdafgdfsgdsfgdfsgdsfg</p>
        </div>
</div>

CSS:

.summaryBox {
        border: 1px solid green ;
        width: 80%;
        margin: auto;
}

.summaryBox .img1 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .img2 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .sum1 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}

.summaryBox .sum2 {
        width: 17%;
        float: left;
        color: white;
        padding: 0px .5% 0px .5%;
}