make center element text-typing

Author: ZakaCoding

css/main.css

@@ -1,19 +1,36 @@
+* {
+    box-sizing: border-box;
+}
+
 html,body {
     margin: 0px;
     padding: 0px;
 }
 
 .main {
-    width: 100vh;
+    width: 100%;
     height: 100vh;
     margin:0px;
     padding:0px;
+    position:relative;
 }
 
 .text-typing {
-    display: flex;
+    display:flex;
+    justify-content:center;
+    margin-left: auto;
+    margin-right: auto;
+    vertical-align: bottom;
 }
 
 h1 {
-    font-family:'consolas';
+    font-family:'consolas' !important;
+}
+
+.typed-cursor {
+    opacity: 1;
+    font-size: 30px;
+    font-weight: bolder;
+    margin: 20px 2px;
+    vertical-align: baseline;
 }

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hello, I'am Zaka</title>
+    <title>Hello, I'm Zaka</title>
     <!-- Link CSS -->
     <link rel="stylesheet" type="text/css" href="css/main.css">
     <!-- javascript -->
@@ -27,7 +27,7 @@ <h1 id="element"></h1>
 <!-- script in the end off body -->
 <script>
     var typed = new Typed('#element', {
-        strings: ["Hello, I'm Zaka ^1000","Hello, I'm a programmer ^1000", "I focus on web development ^2000"],
+        strings: ["Hello, I'm Zaka ^2000","Hello, I'm a programmer ^1000", "I focus on web development ^2500"],
         // smartBackspace : true,
         typeSpeed: 50,
         backSpeed: 15,