Formatting bootstrap panels for printing

Question

I'm having a problem with properly formatting my bootstrap panels for printing. The charts being contained within the bootstrap panels overrun the panel border on the right side (only when I print though, everything looks fine on the actual web page) and the charts get split by page breaks. I've tried using print media queries and using page-break-inside and page-break-after but nothing is working (I could be doing it wrong though).

Here is my code utilizing the bootstrap panels. I'm also using Font Awesome for some interactive buttons and I'm using canvasJS for my charts.

<div class="row">
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Work Orders by Priority
                        <a data-toggle="collapse" data-target="#collapse1">
                            <span class="fa fa-line-chart pull-right panelColBtn rotate"/>
                        </a>
                    </h3>
                </div>
                <div id="collapse1" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div>
                            <div id="chartContainer1" style="height: 450px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">% of Work Requests with Repair Tags
                        <a data-toggle="collapse" data-target="#collapse2">
                            <span class="fa fa-line-chart pull-right panelColBtn rotate"/>
                        </a>
                    </h3>
                </div>
                <div id="collapse2" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div>
                            <div id="chartContainer2" style="height: 450px; width: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here is what I had tried for my print media query to attempt to resolve the page break issue.

@media print {
    div.panel, div.panel-primary {
        page-break-inside: avoid !important;
        page-break-after: auto !important;
    }
}

I checked out this thread before coming here and followed along with it but it seems that the original poster was never able to get it working correctly either. Printing Twitter Bootstrap correctly

Can anyone shed some light on to how this issue could be resolved?