change the width

index.html

@@ -19,7 +19,7 @@
   <fieldset>
     <h2 class="fs-title">Create your account</h2>
     <h3 class="fs-subtitle">This is step 1</h3>
-    <input type="text" name="email" placeholder="Email" />
+    <input type="text" name="[email protected]" placeholder="Email" />
     <input type="password" name="pass" placeholder="Password" />
     <input type="password" name="cpass" placeholder="Confirm Password" />
     <input type="button" name="next" class="next action-button" value="Next" />
@@ -50,4 +50,4 @@ <h3 class="fs-subtitle">We will never sell it</h3>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script><script  src="./script.js"></script>
 
 </body>
-</html>
+</html>

style.css

@@ -18,13 +18,13 @@ body {
 }
 /*form styles*/
 #msform {
-	width: 400px;
+	width: 300px;
 	margin: 50px auto;
 	text-align: center;
 	position: relative;
 }
 #msform fieldset {
-	background: white;
+	background: yellow;
 	border: 0 none;
 	border-radius: 3px;
 	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
@@ -54,7 +54,7 @@ body {
 }
 /*buttons*/
 #msform .action-button {
-	width: 100px;
+	width: 150px;
 	background: #27AE60;
 	font-weight: bold;
 	color: white;
@@ -99,7 +99,7 @@ body {
 #progressbar li:before {
 	content: counter(step);
 	counter-increment: step;
-	width: 20px;
+	width: 30px;
 	line-height: 20px;
 	display: block;
 	font-size: 10px;
@@ -128,4 +128,4 @@ body {
 #progressbar li.active:before,  #progressbar li.active:after{
 	background: #27AE60;
 	color: white;
-}
+}