fixing styles

src/components/Screen.vue

@@ -1,7 +1,8 @@
 <template>
   <div class='container'>
     <p id="timer">{{ timer }}<p>
-    <p id="typing-speed" v-if="!timerRunning">{{ typingSpeed }} words / minute </p>
+    <p id="typing-speed" v-if="timerRunning">{{ wordCount }}</p>
+    <p v-else>{{ typingSpeed }} words / minute</p>
     <div id="prompt-screen">
       <span v-for="(letter, index) in letters" :key="index" :class="getSpanClasses(index)">{{ letter }}</span>
     </div>
@@ -27,7 +28,7 @@ export default {
       isWrong: false,
       timer: 60,
       timerRunning: false,
-      typingSpeed: ""
+      typingSpeed: "",
     }
   },
   async mounted() {
@@ -121,7 +122,7 @@ export default {
 
 <style scoped>
 .container {
-  margin-left: 50px;
+  text-align: center;
 }
 
 
@@ -130,12 +131,12 @@ export default {
   font-size: 2em;
   width: 50%;
   font-family: Arial, Helvetica, sans-serif;
-  margin-bottom: 50px;
+  margin: auto;
 }
 
 #user-input {
   display: block;
-  float: left;
+  margin-top: 50px;
 }
 
 span.active {