<div style="
  position: relative;
  width: 745px;
  height: 120px;
  background-color: #000;
  background-image: url('https://mycommunitytv.org/images/give-back-gift-cards-745-x-120-px-1.png');
  background-repeat: no-repeat;
  margin: 0 auto;
">
  <div id="clock-banner-time" style="
    position: absolute; 
    font-family: Arial, sans-serif;
    font-size: 25.5px;
    font-weight: bold;
    color: #fff;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
  ">
    Loading...
  </div>
</div>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const VERTICAL_POSITION_PX = 6;
    const clockElement = document.getElementById('clock-banner-time');
    const bannerWidth = 699;

    function updateDateTime() {
      const now = new Date();
      const weekday = now.toLocaleDateString(undefined, { weekday: 'short' });
      const month = now.toLocaleDateString(undefined, { month: 'short' });
      const day = now.getDate();
      
      let hours = now.getHours();
      let minutes = now.getMinutes();
      hours = hours % 12;
      hours = hours ? hours : 12;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      const time = hours + ':' + minutes;
      
      const weekdayCap = weekday.charAt(0).toUpperCase() + weekday.slice(1);
      const monthCap = month.charAt(0).toUpperCase() + month.slice(1);
      
      const formatted = `${weekdayCap}, ${monthCap} ${day}, ${time}`;
      
      clockElement.textContent = formatted;

      const clockWidth = clockElement.offsetWidth;
      const firstThirdCenter = (bannerWidth / 3) / 2;
      const horizontalPositionPx = firstThirdCenter - (clockWidth / 2) + 180; /* Moved right by 1px */

      clockElement.style.top = VERTICAL_POSITION_PX + 'px';
      clockElement.style.left = horizontalPositionPx + 'px';
    }

    updateDateTime();
    setInterval(updateDateTime, 1000);
  });
</script>