Form clears only when check is clicked, fixed display issues

hourglass/client/profile/profile.css

@@ -20,6 +20,7 @@
 	font-weight: 400;
 	margin: 0;
 	margin-bottom: 1%;
+	margin-right: 10%;
 }
 
 .profHea {
@@ -301,15 +302,22 @@
 	padding-top: 1%;
 }
 
+#formContainer {
+	margin-left: 5% !important;
+	margin-right: 5% !important;
+	margin-bottom: 0 !important;
+	position: relative;
+	
+}
+
 #create div {
-	margin: 2%;
-	margin-left: 11%;
-	margin-bottom: 5%;
+	margin: 3% 6% 5% 6%;
 	display: inline-block;
 }
 
 .creInput {
 	font-size: 120%;
+	width: 100%;
 	padding: 3%;
 }
 

hourglass/client/profile/profile.html

@@ -91,6 +91,7 @@
 						{{#if profClassTab "creClass"}}
 							<div id="creRules"><p>Insert description and rules of create a class --Will style later--</p></div>
 							<form id="create">
+								<div id="formContainer">
 									<div>
 						            	<p class="profTitle">School:</p>
 				              			{{> inputAutocomplete settings=schoolcomplete class="form-control creInput" 		type="text" name="school" placeholder="Example: International Academy" }}
@@ -124,7 +125,8 @@
 						                  	<p class="profOptionText">Other</p>
 						              	</div>
 							        </div>
-						        <h3 id="creSubmit" style="margin-left:{{submitMargin}}">Submit Request</h3>
+						        </div>
+						        <h3 id="creSubmit">Submit Request</h3>
 				          	</form> 
 						{{/if}}
 						</div>

hourglass/client/profile/profile.js

@@ -384,6 +384,10 @@ Template.profile.events({
     'click .fa-check-circle-o' () {
         sendData(Session.get("confirm"));
         closeDivFade(document.getElementsByClassName("overlay")[0]);
+        if(Session.get("confirm") === "createClass") {
+        	var form = document.getElementById("create");
+        	for(var i = 0; i < form.length; i++) form[i].value = "";
+        }
         Session.set("serverData", null);
         Session.set("confirm", null);
     },