now main content is resizable

shared/static/css/style.css

@@ -61,6 +61,18 @@ a, a:hover, a:focus {
 	text-decoration: none;
 }	
 
+/* centered columns styles */
+.row-centered {
+    text-align:center;
+}
+.col-centered {
+    display:inline-block;
+    float:none;
+    /* reset the text-align */
+    text-align:left;
+    /* inline-block space fix */
+}
+
 
 
 /*Helpers*/
@@ -684,7 +696,7 @@ PANELS CONFIGURATIONS
 .form-panel {
 	background: #ffffff;
 	margin: 10px;
-	padding: 10px;
+	padding: 20px;
 	box-shadow: 0px 3px 2px #aab2bd;
 	text-align: left;
 }

shared/templates/base.html

@@ -22,8 +22,8 @@
 {% endblock %}
 
 {% block real_content %}
-    <div class="row">
-        <div class="col-lg-12">
+    <div class="row row-centered">
+        <div class="{% block page_size %}col-lg-12{% endblock %} col-centered">
             <h2><i class="fa fa-angle-right"></i>{% block page_title %}{% endblock %}</h2>
             {% block content %}{% endblock %}
         </div>

user/templates/user/user_form.html

@@ -4,6 +4,9 @@
 {% load bootstrap %}
 
 {% block page_title %}{{ page_title }}{% endblock %}
+
+{% block page_size %}col-lg-8{% endblock %}
+
 {% block content %}
   <!-- BASIC FORM ELELEMNTS -->
     <div class="row">