diff --git a/public/css/style.scss b/public/css/style.scss
index fb824b72e..1592648bf 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -718,6 +718,11 @@ a:hover {
 }
 
 #timerNumber {
+  width: 0;
+  height: 0;
+  margin: 0 auto;
+  display: grid;
+  justify-content: center;
   bottom: 6rem;
   transition: none;
 }
diff --git a/public/index.html b/public/index.html
index 786b3d8c5..406bfc15e 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1001,7 +1001,7 @@
               <i class="fas fa-copy"></i>
             </span>
           </div>
-          <div id="timerNumber">60</div>
+          <div id="timerNumber"><div>60</div></div>
           <div id="miniTimerAndLiveWpm">
             <div class="time hidden">1:00</div>
             <div class="wpm">60</div>
diff --git a/public/js/script.js b/public/js/script.js
index e0e15ca93..a7250fad2 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -1092,7 +1092,7 @@ function updateTimer() {
       //   }
       // }
       let displayTime = secondsToString(config.time - time);
-      $("#timerNumber").html(displayTime);
+      $("#timerNumber").html("<div>"+displayTime+"</div>");
       // $("#timerNumber").html(config.time - time);
     } else if (config.timerStyle === "mini") {
       let displayTime = secondsToString(config.time - time);
@@ -1136,7 +1136,7 @@ function updateTimer() {
           outof = customText.length;
         }
       }
-      $("#timerNumber").html(`${inputHistory.length}/${outof}`);
+      $("#timerNumber").html("<div>"+`${inputHistory.length}/${outof}`+"</div>");
       // $("#timerNumber").html(config.time - time);
     } else if (config.timerStyle === "mini") {
       let outof = wordsList.length;