However some 0 numbers dissappear and I am trying to increase the size of the font.
I have created a css file in the module subfolder as per your instructions in the cs file. Then I have copied and edited the css info from this post https://forum.magicmirror.builders/topic/4527/change-fontsize , I doubled all values to see if it makes a difference, but the text stayed the same size. Am I looking in the right area.

I did uncomment your line

    return ["MMM-MyCountDown.css"]   // If needed, you can add your css.

Thanks
Dave

 body {
 	
.xsmall {
  font-size: 30px;
  line-height: 40px;
}

.small {
  font-size: 40px;
  line-height: 50px;
}

.medium {
  font-size: 60px;
  line-height: 70px;
}

.large {
  font-size: 130px;
  line-height: 130px;
}

.xlarge {
  font-size: 150px;
  line-height: 150px;
  letter-spacing: -6px;
}

 }

Thanks again for your patience and help, I shall rebuild this pi this afternoon and let you know how I get on,
Dave

modules/MMM-MyCountDown/MMM-MyCountDown.js

Module.register("MMM-MyCountDown", {
  defaults: {
    refreshInterval: 1000,
    targettMS : 1000 * 10, // milliseconds to alarm
  },

  /*
  getStyles: function() {
    // return ["MMM-MyCountDown.css"]   // If needed, you can add your css.
  },
  */

  getScripts: function() {
    return ["moment.js"]
  },

  start: function() {
    this.endTime = null
    this.timer = null
  },

  getDom: function() {
    var dom = document.createElement("div")
    dom.className = "CountDown_Content"
    dom.innerHTML = this.showRemain()
    return dom
  },

  notificationReceived: function(noti, payload, sender) {
    switch(noti) {
      case "DOM_OBJECTS_CREATED":
        this.startCountDown()
        break
      case "RESET":
        this.startCountDown(payload)
        break
    }
  },

  startCountDown: function(ms = null) {
    this.resetCountDown()
    ms = (ms) ? ms : this.config.targetMS
    this.endTime = moment().add(ms, "ms")
    this.refresh()
  },

  resetCountDown: function() {
    this.endTime = null
    clearTimeout(this.timer)
    this.timer = null
  },

  refresh: function() {
    this.updateDom()
    var curTime = moment()
    if (curTime.isAfter(this.endTime)) {
      this.resetCountDown()
      this.sendNotification(
        "SHOW_ALERT",
        {
          title: "MyCountDown",
          message: "CountDown ended.",
          timer: 3000,
        }
      )
    } else {
      this.timer = setTimeout(()=>{
        this.refresh()
      }, this.config.refreshInterval)
    }
  },

  showRemain: function() {
    if (!this.endTime) {
      return "CountDown being not set."
    } else {
      var curTime = moment()
      var remain = moment.duration(this.endTime.diff(curTime))
      var format = function (dur) {
        str = ""
        if(dur.days() > 1) str = str + Math.floor(dur.days()) + " - "
        if(dur.hours() > 1) str = str + Math.floor(dur.hours()) + ":"
        if(dur.minutes() > 1) str = str + Math.floor(dur.minutes()) + ":"
        if(dur.seconds() > 1) str = str + Math.floor(dur.seconds())
        return str
      }
      return format(remain)
    }
  },
})

config/config.js

{
  module: "MMM-MyCountDown",
  position: "top_left",
  config: {
    targetMS: 1000*60*60,
  }
}

It will display like this;

Of course, you can look inside and modify for your purpose.

Anyway, You have another option. Build your custom module. Almost the same with your current JS.

Last question. What is the purpose of this count down? Your code will count down from every startup from MM, but I cannot understand why you need this. If I get your intention, maybe more adequate suggestions could be possible.

If you can help steer me to a countdown module that can reset to 60 minutes via MMM-Remote - restart MM then that would be great, or if you can see where I am going wrong below it would help. I have shorted to a sample html file.
At the start of the HTML code, do I need the file header items like DOCUTYPE, html and body? It makes it dissapear in the formatted code below.

{
  module: "MMM-Widget",
  config: {
    widgets: [
      {
        html:`
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>        `,
        position: "top_left",
        width: "800px",
        height: "400px",
        backgroundColor: "#FFF"
      },

Thanks again
David

{
  module: "MMM-Widget",
  config: {
    widgets: [
      {
        html:`
// Put your HTML & JS code into here.
        `,
        position: "top_left",
        width: "800px",
        height: "400px",
        backgroundColor: "#FFF"
      },

    ]
  }
}

issue 1 - MMM-Widget - I cannot get it to display a local file. I have even tried creating a public subfolder and use url local location, but I cant seem to get any public folder to publish?

Issue 2 - MMM-iFrame - Will display a local single test html file but if I use this code below it doesnt. Here is my code that is working in the www.w3schools.com website.

Sorry I am a bit of a noob with html, js MM etc.

I cant seem to add the code in here but here is a link to the w3schools site

Your Code has Been Saved
File has been saved to: https://www.w3schools.com/code/tryit.asp?filename=G0I4VVLAWBCN

Thanks
Dave

<html>
	<head>
		<link rel="stylesheet" href="flipclock.css">

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<script src="flipclock.js"></script>
	</head>
	<body>
	<div class="clock" style="margin:2em;"></div>
	<div class="message"></div>

	<script type="text/javascript">
		var clock;
		
		$(document).ready(function() {
			var clock;

			clock = $('.clock').FlipClock({
		        clockFace: 'MinuteCounter',
		        autoStart: false,
		        callbacks: {
		        	stop: function() {
		        		$('.message').html('The clock has stopped!')
		        	}
		        }
		    });
				    
		    clock.setTime(3598);
		    clock.setCountdown(true);
		    clock.start();

		});
	</script>
	
	</body>
</html>