Highcharts Legend styles no longer rendering correctly

Question

I have had these charts built for a couple months, and just today the styles of the legend seem to have shifted about 150px to the left. They were just right-aligned from the pie chart but now render directly over the top of the pie chart and I am unable to figure out why. I can add inline styles to the div's I am creating with margins and padding but that doesn't justify the colored boxes on the legend that correspond with each pie slice. My code/styles have not changed and I do believe this is a functionality issue. Here is my code; Any help is appreciated.

var options = {
        chart:{type:'pie',
            renderTo: 'ctl00_ContentPlaceHolder1_Overview1_AssetCategoryChart',
              events: {
                load: function(event) {
                $('#ctl00_ContentPlaceHolder1_Overview1_AssetCategoryChart .highcharts-legend-item').last().append('<br/><div style="width: 200px; margin-left: 170px; height: 2px;">_____</div><br/><div style="width:200px; height: 10px;"><span style="float:right"><b>100%</b></span> </div>');                    
                }
              },
            spacingTop: 0,
            marginTop: 0                  
            },
        credits:{enabled: false},
        colors:[
            '#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319',     '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
            ],
        title:{text: null},
        tooltip:{
            enabled: true,
            animation: true,
            formatter: function(){
                return this.point.name + '<br/>' + this.y.toFixed(2) + '%';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                animation: true,
                cursor: 'pointer',
                showInLegend: true,
                dataLabels: {
                    enabled: false,                        
                    formatter: function() {
                        return this.y.toFixed(2) + '%';
                    }
                }                                   
            }
        },
        legend: {
            enabled: true,
            layout: 'vertical',
            align: 'right',
            width: 200,
            verticalAlign: 'top',
            borderWidth: 0,
            useHTML: true,
            itemMarginBottom: 4,
            labelFormatter: function() {
                return '<div style="width:180px; margin-left: 150px;"><span style="float:left">' + this.name + '</span><span style="float:right">' + this.y.toFixed(2) + '%</span></div>';
            },
            title: {
                text: 'Category',
                style: {
                    fontWeight: 'bold'
                }
            }
        },
        series: [{
            type: 'pie',
            dataLabels:{

            },
            data: [
                ['Real Estate', 12.55],
                ['Large-Cap Growth', 12.34],
                ['Foreign Large-Cap Blend', 12.19],
                ['Large-Cap Value', 7.51],
                ['Emerging Markets', 6.51],
                ['Health',5.59],
                ['Cash Equivalents',5.23],
                ['Foreign Large-Cap Value',4.02],
                ['Large-Cap Blend',3.95],
                ['World Allocation',3.55],
                ['Mid-Cap Growth',3.29],
                ['Remaining', 23.30]
            ]
        }]
    }