Move text without increasing size of div element

I am new to web development and I am trying to figure out how to move text in a div element without increasing the size of the div. I tried using padding, but other text got misaligned because of it (Activity log gets moved down).

I am trying to centrally align the text under current status and only make the text “Current Status” and “Activity Log” in bold and not the text below them.

$(function updat() {
  var url = "https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var humid = [],
    date = [],
    high=[],
    day=[],
    chanceOfRain=[],
    humid_final = [],
    day_final=[],
    high_final=[],
    chanceOfRain_final=[],
    Itemss=[],
    SortedItems=[]
    var htmlText='';

  $.getJSON(url, function (json) {

    $(json['Items']).each(function(i, data) {
      //Store indicator name
      
      // fill the date array
      humid.push(data.humidity);
      // fill the string data array 
      date.push(data.Date);

      high.push(data.high);
      day.push(data.Day);
      chanceOfRain.push(data.chanceOfRain);

    });

   	//unsorted array
    Itemss=$(json['Items']);
    //console.log("ITEMS",Itemss);

    //sorted array- date
     date.sort(function(a,b) { return a - b;});

    // Itemss.sort(function(a,b){return  date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});

     console.log("Sorted Days", date);
    Itemss.sort(function(a,b){return date.indexOf(a.Date)<date.indexOf(b.Date)?-1:1});
     console.log(" Sorted ITEMS",Itemss);
    ////////

    // query send string that we need to convert into numbers
    for (var i = 0; i < humid.length; i++) {
      if (humid[i] != null) {
        humid_final.push(parseFloat(humid[i]));
        high_final.push(parseFloat(high[i]));
        day_final.push(parseFloat(day[i]));
        chanceOfRain_final.push(parseFloat(chanceOfRain[i]));
      } else {
       humid_final.push(null)
      };
    }

    //sorting the arrays
    day_final.sort(function(a,b) { return a - b;});
   // console.log("Sorted day_final", day_final);

    humid_final.sort(function(a,b) { return a - b;});


    //ACTIVITY LOG
    var h1 = [10, 20, 30, 40,50,60];
    var t1 = [50, 60, 70, 80, 90, 100];
    var activ= document.querySelector('.activ');
    for(var i=0; i<h1.length;i++){
      activ.innerHTML += `<p>Temperature was ${t1[i]} degrees and humidity was ${h1[i]} % `;
    }

    var chart = new Highcharts.chart({

       credits: {
      enabled: false
        },
      chart: {
        height: 200,
        type: 'spline',
        renderTo: 'light',
        marginBottom: 100
      },
      title: {
        text: ' Ambient Light'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">/u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: ''
      },
      xAxis: {
        categories: day_final //.reverse() to have the min year on the left 
      },
      series: [{
        name: 'light level',
        data: high_final, //
        color: '#9b0000' 
      }]
    });


var chart1 = new Highcharts.chart({
       credits: {
        enabled: false
        },
      chart: {
        height: 200,
        type: 'spline',
        renderTo: 'temp&humid',
        marginBottom: 100
      },
      title: {
        text: 'Temperature and Humidity'
      },
      tooltip: {
        valueDecimals: 2,
        pointFormat: '<span style="color:{point.color}">/u25CF</span> {series.name}: <b>{point.y}%</b><br/>'
      },
      plotOptions: {
        series: {
          marker: {
            enabled: false
          }
        }
      },
      subtitle: {
        text: ''
      },
      xAxis: {
        categories: day_final //.reverse() to have the min year on the left 
      },
      series: [{
       name: 'Temperature',
        data: chanceOfRain_final,
        color:'#646569' //
      },
      {
        type:'line',
        name:'Humidity',
        data: day_final,
        color:'#c5050c' 
      }]
    });

var chart2=  Highcharts.chart('stacked', {

    credits: {
      enabled: false
    },
    chart: {
      height: 250,
      width: 400,
        type: 'column'
    },
    title: {
        text: "Today's Light and Water Sources"
    },
    xAxis: {
        categories: ['Water', 'Light']
    },
    yAxis: {
        min: 0,
        title: {
            text: ''
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
    },
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Natural',
        data: [7 , 6],
        color:'#c5050c'
    }, {
        name: 'Automatic',
        data: [ 3, 4],
        color: '#646569'
    }]
});


  }); //getJSON method
  //setTimeout(updat, 3000);

});


$(function dat() {
 // console.log("here");
  var url="https://xpm4zyor39.execute-api.us-west-2.amazonaws.com/prod/entries";
  var htmlText='';

$.getJSON(url, function (json) {


});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src= "Ag.js"></script>

<div id="light" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="temp&humid" style="min-width: 310px; height: 200px; left:10px"></div>
<div id="stacked"> </div>

<div id="parentContainer" style="margin-left:400px; width: 200px; margin-top: -20%" >

	<div id="currentSatus"><center><b>Current Status<b><center></div>
	<br>
	<div id="temp" style=" background: #72D923;height: 50px"><font face='verdana'><center>Temperature<center></font> </div>
	<div id="hum" style="background: red; height: 50px"><font face='verdana'><center>Humidity<center></font></div>
	<div id="water" style="background:#72D923; height: 50px "><font face='verdana'><center>Water</center></font></div>
	<div id="ligh" style="background: red; height: 50px"><font face='verdana'><center>Light</center></font></div>
 </div>

<div class=" activ" id="log" style="margin-left: 600px; text-align: center; margin-top: -18.5%"><center>Activity Log</center> </div>


I think I figured it out. You may want to consider some editor when coding html/css (one of my favorites is sublime). What I noticed and the only real take-away from this answer should be the tags were not being closed when they are opened. I noticed it with the <b> tag and <center> tags in the second section.