diff --git a/hosting/static/hosting/css/landing-page.css b/hosting/static/hosting/css/landing-page.css
index 54076de3..9f54e22b 100644
--- a/hosting/static/hosting/css/landing-page.css
+++ b/hosting/static/hosting/css/landing-page.css
@@ -524,7 +524,7 @@ a.unlink:hover {
 }
 .brand {
     float: left;
-    width: 8%;
+    width: 10%;
 }
 .brand #brand-icon {
     vertical-align: bottom;
@@ -592,6 +592,23 @@ a.unlink:hover {
         margin-top: 30px;
         margin-bottom: 30px;
     }
+
+    .credit-card-element-with-brand {
+        width: 100%;
+        float: left;
+    }
+
+    .brand {
+        width: 16%;
+    }
+    
+    .card-expiry-element {
+        width: 40%;
+    }
+    
+    .card-cvc-element {
+        width: 15%;
+    }
 }
 
 @media (min-width: 1200px) {
diff --git a/hosting/templates/hosting/payment.html b/hosting/templates/hosting/payment.html
index a73d09d6..230c0bdf 100644
--- a/hosting/templates/hosting/payment.html
+++ b/hosting/templates/hosting/payment.html
@@ -155,9 +155,11 @@
   <form action="" id="payment-form-new" method="POST">
     <input type="hidden" name="token" />
     <div class="group">
-		<div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
-      <div class="card-number-element">
-        <div id="card-number-element" class="field"></div>
+	  <div class="credit-card-element-with-brand">
+		  <div class="brand"><i class="pf pf-credit-card" id="brand-icon"></i></div>
+		  <div class="card-number-element">
+			<div id="card-number-element" class="field"></div>
+		  </div>
       </div>
       <div class="card-expiry-element">
         <div id="card-expiry-element" class="field"></div>