Grid not respecting parent elements width?

[Adam]

I have a grid within an html table, it is inside a tr and td tag. When the table is resized to about 1425px screen width the table seems to break past the width of its parent div and its parent, and is causing data to be cut off and no horizontal scroll bar to show up. I attached to screenshots. The first "working.png" shows what it should look like and the second "broke.png" shows the html element with the grid breaking outside its parent element. When I remove the grid it seems to work fine so I don't think its anything with my html. Maybe I need to add some css? I haven't been able to fix it. The grid is through asp.net mvc

 

<tr>
    <td>
        <div class="panel panel-default" style="margin-bottom: 0px;">
            <div class="panel-heading" style="background-color: #F2F6F9">
                <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionAdditives1" href="#accordion1_Additives1" aria-expanded="true" id="i-toggle4">
                        <i class="glyphicon glyphicon-minus" style="margin: 0px 7px 0px 0px"></i><b>Additives</b>
                    </a>
                </h4>
            </div>
            <div id="accordion1_Additives1" class="panel-collapse collapse in" aria-expanded="true">
                <div class="panel-body">
                    @{Html.RenderPartial("_AdditivesGrid");}
                </div>
            </div>
        </div>
    </td>
</tr>

[Adam]

nevermind! I figured it out.