Left align create password.

mascara/src/app/first-time/create-password-screen.js

@@ -60,7 +60,7 @@ class CreatePasswordScreen extends Component {
     return isLoading
       ? <LoadingScreen loadingMessage="Creating your new account" />
       : (
-        <div>
+        <div className={classnames({ 'first-view-main-wrapper': !isMascara })}>
           <div className={classnames({
             'first-view-main': !isMascara,
             'first-view-main__mascara': isMascara,

mascara/src/app/first-time/index.css

@@ -21,6 +21,12 @@
   text-align: center;
 }
 
+.first-view-main-wrapper {
+  display: flex;
+  width: 100%;
+  padding-left: 10vw;
+}
+
 .first-view-main,
 .first-view-main__mascara {
   display: flex;
@@ -32,15 +38,9 @@
   justify-content: space-between;
 }
 
-@media screen and (min-width: 576px) {
-  .first-view-main {
-    width: 85vw;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .first-view-main {
-    width: 80vw;
+@media screen and (max-width: 575px) {
+  .first-view-main-wrapper {
+    padding: 0;
   }
 }
 

ui/app/css/itcss/components/welcome-screen.scss

@@ -10,6 +10,10 @@
     padding: 70px 0;
     background: $white;
 
+    @media screen and (max-width: 575px) {
+      padding: 0;
+    }
+
     &__info {
         display: flex;
         flex-flow: column;
@@ -20,6 +24,10 @@
         &__header {
             font-size: 1.65em;
             margin-bottom: 14px;
+
+            @media screen and (max-width: 575px) {
+              font-size: 1.5em;
+            }
         }
 
         &__copy {
@@ -27,6 +35,10 @@
             width: 400px;
             max-width: 90vw;
             text-align: center;
+
+            @media screen and (max-width: 575px) {
+              font-size: 0.9em;
+            }
         }
     }