Refactor css

app/shared-components/ForgotPassword/ForgotPassword.jsx

@@ -113,14 +113,14 @@ class ForgotPassword extends React.Component {
 		return (
 			<div id={ContainerClassNames}>
 				<div className="row align-center">
-					<form onSubmit={this.handleSubmit}>
+					<form className="ForgotPasswordForm" onSubmit={this.handleSubmit}>
 						{panel && (
 							<h4 id={MessageClassNames}>
 								{t('forgot_password_message')}
 							</h4>
 						)}
 						{hub && (
-							<h3 id={MessageClassNames}>
+							<h3 id={MessageClassNames} className="text-center">
 								{t('forgot_password_message')}
 							</h3>
 						)}

app/shared-components/ForgotPassword/ForgotPassword.scss

@@ -32,18 +32,12 @@
 /* FORGOT PASSWORD HUB */
 #ForgotPasswordView {
 	height: 100%;
-	display: flex;
-	align-items: center;
-	margin-top: -10%;
+	margin-top: 100px;
 	#forgot-email {
 		margin: 40px auto;
 	}
-	#ForgotPasswordMessage {
-		width: 548px;
-	}
-	.ForgotPasswordButtonsContainer {
-		margin-left: 3px;
-		width: 548px;
+	.ForgotPasswordForm {
+		width: 456px;
 	}
 	input#ForgotPasswordMessage {
 		// Foundation Overrides
@@ -60,15 +54,6 @@
 	#send-button {
 		width: 150px;
 	}
-	@media only screen and (max-width: 800px) {
-		#ForgotPasswordMessage {
-			width: 456px;
-			text-align: center;
-		}
-		.ForgotPasswordButtonsContainer {
-			width: 456px;
-		}
-	}
 }
 
 /* FORGOT PASSWORD SHARED */