How do I reduce the space in the last container?

Question

I'm utilizing Highcharts with containers 2, 3, and 4. Following container 4, there's text marked as ABCD. I'm attempting to minimize the gap between container 4 and the ABCD text. Despite various attempts, I haven't been successful in achieving this.

Here is my code:

function generateChart(containerId, titleText, responses, data) {
    Highcharts.chart(containerId, {
        title: {
            text: titleText,
            align: 'center',
            style: {
                color: '#333333',
                fontSize: '12px',
                fontWeight: 'bold'
            }
        },
        chart: {
            type: 'pie',
            marginTop: -90,
            events: {
                load: function() {
                    var chart = this,
                        centerX = chart.plotWidth / 2.1,
                        centerY = chart.plotHeight / 3.2,
                        innerSize = '38%',
                        titleText = responses + '<br>Responses';

                    chart.renderer.text(titleText, centerX, centerY)
                        .css({
                            color: '#333333',
                            fontSize: '11px',
                            fontWeight: 'bold'
                        })
                        .add();
                }
            }
        },
        tooltip: {
            valueSuffix: '%'
        },
        plotOptions: {
            pie: {
                innerSize: '38%',
                size: '42%'
            },
            series: {
                allowPointSelect: true,
                showInLegend: true,
                cursor: 'pointer',
                dataLabels: [{
                    enabled: true,
                    distance: 20
                }, {
                    enabled: true,
                    distance: -30,
                    format: '{point.percentage:.1f}%',
                    style: {
                        fontSize: '0.7em',
                        textOutline: 'none'
                        
                    },
                    filter: {
                        operator: '>',
                        property: 'percentage',
                        value: 10
                    }
                }]
            }
        },
colors: ['#203864', '#b7cbee', '#f8ce04', '#b6992d'],
legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            symbolWidth: 10
        },
        series: [{
            name: 'Percentage',
            colorByPoint: true,
            data: data
        }]
    });
}

// Generate charts
generateChart('container2', 'Do you like sdd  df gf f gf  fh g h g  j hjhjh j j j jh  gjh j j hj fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j fh g h g  j hjhjh j j j jh  gjh j j?', 549, [
    { name: 'Some of the time', y: 34 },
    { name: 'Never', y: 31 },
    { name: 'Most of the time', y: 35 }
]);

generateChart('container3', 'Do you fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh?', 549, [
    { name: 'Some of the time', y: 67 },
    { name: 'Most of the time', y: 33 }
]);

generateChart('container4', 'fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh fdfdfdfg fg h ghg h gfh ghg  jh jh j gh jhj h j hjjhjh.', 543, [
    { name: 'Some of the time', y: 55 },
    { name: 'Never', y: 15 },
    { name: 'Most of the time', y: 25 },
    { name: 'All the time', y: 5 }
]);

 
      #container3 {
        margin-top: -40px; /* Adjust the value as needed */
    }
#container4 {
        margin-top: -90px; /* Adjust the value as needed */
        
    }

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="containerall" style=" border: 1px solid lightgray; margin-top: 20px;">
<div id="container2"></div>

<div id="container3"></div>

<div id="container4"></div>
</div>
ABCD