More CSS adjustments

- Adjust styles to show only one column in mid and small screens
- also group all "settings" styles

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

style/pi-hole.css

@@ -547,26 +547,6 @@ td.details-control {
   padding-right: 20px;
 }
 
-.settings-container {
-  --number-of-columns: 2;
-  display: flex;
-  flex-wrap: wrap;
-}
-.settings-container > .box {
-  margin: 10px;
-  width: calc((100% / var(--number-of-columns)) - 20px);
-}
-.settings-box .control-label small {
-  font-weight: normal;
-  display: block;
-}
-
-@media screen and (max-width: 991px) {
-  .settings-container {
-    --number-of-columns: 1;
-  }
-}
-
 /*** Login page ***/
 .login-page {
   padding: 15px;
@@ -902,13 +882,6 @@ body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child:checked +
   flex: 1 0 auto;
 }
 
-/* Global settings level selector container */
-.settings-selector {
-  padding: 14px 0 0;
-  order: 2;
-  font-size: 18px;
-}
-
 .navbar-nav {
   height: 50px;
 }
@@ -1167,6 +1140,35 @@ table.dataTable tbody > tr > .selected {
   }
 }
 
+.settings-container {
+  --columns: 2;
+  --gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gap);
+}
+.settings-container > .box {
+  margin: 0;
+  width: calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
+}
+.settings-box .control-label small {
+  font-weight: normal;
+  display: block;
+}
+
+@media screen and (max-width: 991px) {
+  .settings-container {
+    --columns: 1;
+  }
+}
+
+/* Global settings level selector container */
+.settings-selector {
+  padding: 14px 0 0;
+  order: 2;
+  font-size: 18px;
+}
+
 /* Hide the checkbox used for settings level selector */
 #expert-settings,
 #only-changed {