有些事如何做: Centering a countdown timer

I have been playing around with my countdown timer and now I can't center it again. Is it something to do with my countdown css or am I missing @main center in the style?

I am very new to this so it has been a bit of a copy and paste exercise as well as understanding how to use it. Any recommendations in how I could improve this as well would be great!

.live-widget {  margin: center;  display: flex;  color: #eee;  font-family: 'Oswald', sans-serif;  text-align: center;  width: 66%;}    body .flip-clock-wrapper {  margin: 0 auto;  width: 50%;}    .live-widget .event-date-countdown{   width: 100%;  text-shadow: 0 2px 2px rgb(0 0 0 / 50%);`#event-countdown{    display: flex;  justify-content: space-between;  max-width: 500px;  border-radius:8px;  background: rgb(0 0 0 / 28%);}`}    .counter-section{  background-size: cover;  background-position: center;  background-color: #14203bbd;  background-blend-mode: darken;  padding: 1rem 0;}    #h-event-countdown{  display: flex;  justify-content: space-between;  max-width:500px;  margin:center;  border-radius: 8px;  background: rgb(0 0 0 / 28%);}    .event-date-countdown > div, .counter{  font-size:clamp(1.5rem, calc(1.5rem + 3.5vw), 3rem);  color:#138bc1;  text-align: center;}    .event-date-countdown > div > div span{  display: block;  font-weight: 100;  font-size: 16px;  color:#eee;  font-family: 'Mandali',sans-serif;  margin: 0;}

<div class="live-widget">    <style>      @main center    </style>    <div class="event-date-countdown">      <div id="event-countdown"></div>    </div>  </div>

Here is my countdown.js

// Set the date were counting down to    eventCountDown("event-countdown", "April 14, 2021 18:30:00");  eventCountDown("h-event-countdown", "June 3, 2021 09:00:00");    function eventCountDown(idName,time){      let countDownDate = new Date(time).getTime();      let x = setInterval(function() {        let now = new Date().getTime();        let distance = countDownDate - now;        let days = Math.floor(distance / (1000 * 60 * 60 * 24));      let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));      let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));      let seconds = Math.floor((distance % (1000 * 60)) / 1000);        document.getElementById(idName).innerHTML =      `<div class="t-days">${days}<span>days</span></div>      <div class="t-hours">${hours}<span>hours</span></div>      <div class="t-minutes">${minutes}<span>minutes</span></div>      <div class="t-seconds">${seconds}<span>seconds</span></div>      `;        if (distance < 0) {       clearInterval(x);    document.getElementById(idName).innerHTML = "EXPIRED";      }    }, 1000);  }          $('.counter-head .counter').each(function() {    var $this = $(this),        countTo = $this.attr('data-count');      $({ countNum: $this.text()}).animate({      countNum: countTo    },      {      duration: 3000,      easing:'linear',      step: function() {        $this.text(Math.floor(this.countNum));      },      complete: function() {        $this.text(this.countNum);        //alert('finished');      }      });          });

Here is the issue: