alignment and last item border

hosting/static/hosting/css/virtual-machine.css

@@ -230,6 +230,9 @@
 }
 
 /* New styles */
+.dashboard-container-head {
+  padding: 0 8px;
+}
 .dashboard-title-thin {
   font-weight: 300;
   font-size: 32px;
@@ -323,6 +326,10 @@
   padding: 12px 8px;
 }
 
+.table-switch > tbody > tr:last-child > td {
+  border-bottom: 1px solid #ddd;
+}
+
 @media (min-width: 768px) {
   .table-switch > tbody > tr > td:nth-child(1) {
     padding-right: 45px;
@@ -348,8 +355,12 @@
     display: block;
     position: relative;
     border-top: 1px solid #ddd;
-    margin-top: 15px;
+    /* margin-top: 15px; */
     padding-top: 5px;
+    padding-bottom: 15px;
+  }
+  .table-switch tbody tr:last-child {
+    border-bottom: 1px solid #ddd;
   }
   .table-switch tbody tr td {
     display: block;
@@ -367,7 +378,7 @@
   }
   .table-switch .last-td {
     position: absolute;
-    bottom: 5px;
+    bottom: 20px;
     right: 0;
   }
 }

hosting/templates/hosting/virtual_machines.html

@@ -2,6 +2,7 @@
 {% load staticfiles bootstrap3 i18n %}
 {% block content %}
 <div class="dashboard-container">
+    <div class="dashboard-container-head">
         <h3 class="dashboard-title-thin"><img src="{% static 'hosting/img/vm.svg' %}" class="un-icon"> {% trans "Virtual Machines" %}</h3>
         {% if messages %}
             <div class="alert alert-warning">
@@ -10,7 +11,6 @@
                 {% endfor %}
             </div>
         {% endif %}
-
         {% if not error %}
             <div class="dashboard-subtitle">
                 <p>{% trans 'To create a new virtual machine, click "Create VM"' %}</p>
@@ -18,6 +18,10 @@
                     <a class="btn btn-vm" href="{% url 'hosting:create_virtual_machine' %}"><span class="css-plus"></span> <span>{% trans "CREATE VM" %}</span></a>
                 </div>
             </div>
+        {% endif %}
+    </div>
+
+    {% if not error %}
         <table class="table table-switch">
             <thead>
                 <tr>