css tweaks so the pills align better

static/css/main.css

@@ -243,11 +243,12 @@ a, a:visited, a:link {
 }
 .statusBox {
   text-align: center;
-  width: 250px;
+  width: 40%;
 }
 .statusPills {
   font-size: 20px;
   line-height: 23px;
+  margin-left: 5px;
 }
 
 .loading .statusPills {
@@ -397,7 +398,7 @@ a, a:visited, a:link {
   margin: 4px;
   padding: 0;
   color: #808080;
-  width: 250px;
+  width: 40%;
   text-align: center;
 }
 
@@ -474,6 +475,7 @@ a, a:visited, a:link {
 
   .focus-range {
     margin: 0;
+    width: 50%;
   }
 
   .focus-range li {
@@ -491,7 +493,7 @@ a, a:visited, a:link {
 
 @media (max-width: 750px) {
   .bgStatus {
-    width: 240px;
+    width: auto;
     padding: 0 0 20px 0;
   }
 
@@ -503,6 +505,10 @@ a, a:visited, a:link {
     font-size: 12px;
   }
 
+  .statusBox {
+    width: auto;
+  }
+
   .bgStatus .currentBG {
     font-size: 70px;
     line-height: 60px;
@@ -741,10 +747,6 @@ a, a:visited, a:link {
     display: block;
   }
 
-  .statusBox {
-    width: 220px;
-  }
-
   .statusPills {
     display: inline;
     margin-left: auto;