Fixed element spacing for defaul layout

www/themes/jason-williamsca/assets/css/sidemenu.css

@@ -1,7 +1,7 @@
 /* lg Breakpoint */
 @media (min-width: 992px) {
     body {
-        padding-left: 17rem;
+        /*padding-left: 17rem;*/
     }
 
     #sideNav {
@@ -11,7 +11,7 @@
         left: 0;
         display: flex;
         flex-direction: column;
-        width: 17rem;
+        /*width: 17rem;*/
         height: 100vh;
         padding: 0;
         background-color: var(--main-accent-color);
@@ -20,7 +20,7 @@
     #sideNav .navbar-brand {
         display: flex;
         margin: auto auto 0;
-        padding: 0.5rem;
+        /*padding: 0.5rem;*/
     }
     
     #sideNav .navbar-brand .img-profile {

www/themes/jason-williamsca/assets/css/theme.css

@@ -1,3 +1,4 @@
+/* Variables */
 :root {
     --main-bg-color: #E7D9D1; /*#F0E4D1; #E8D5B5; #e7d9d1;*/
     --main-accent-color: #302b44;
@@ -8,6 +9,7 @@
     --body-font: 'Raleway', sans-serif;
 }
 
+/* Structural elements */
 html, body { height: 100%; }
 
 body {
@@ -17,21 +19,25 @@ body {
     color: var(--main-accent-color);
 }
 
-header {
-    margin-bottom: 30px;                    /* Is there a better way to do this? */
-}
-
-header, header nav {
-    min-height: 91px;                        /* 75px for the logo, plus 16px padding */
-}
-
 #page-content {
     flex: 1 0 auto;
 }
 
+#main-nav .navbar-brand {
+    height: 4.5rem;
+    padding-left: 100px;
+    font-family: var(--title-font);
+    font-size: 2.5rem;
+    background-image: url('../images/jwlogo.svg');
+    background-repeat: no-repeat;
+    background-size: 4.5rem;
+    color: var(--main-accent-color);
+}
+
 footer {
     flex-shrink: 0;
     background-color: var(--main-accent-color);
+    padding-top: 1rem;
 }
 
 footer p, footer ul li {
@@ -40,42 +46,56 @@ footer p, footer ul li {
 }
 
 footer ul {
-    margin-top: -16px;
-    padding-left: 20px;
+    margin-top: -1rem;
+    padding-left: 1.25rem;
 }
 
-h1, h2, h3, h4 {
-    font-weight: 500;
+/* Responsive element spacing */
+.container-fluid, #main-nav {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+    
+#main-nav {
+    padding-top: 1rem;
 }
 
-.container-fluid {
-    padding-left: 5%;
-    padding-right: 5%;
+footer, h1, h2 {
+    margin-top: 1rem;
 }
 
-.navbar {
-    padding-left: 5%;
-    padding-right: 5%;
+footer {
+    margin-top: 1rem;
 }
 
-#mainNav .navbar-brand {
-    height: 75px;
-    padding-left: 100px;
-    font-family: var(--title-font);
-    font-size: 2.5rem;
-    background-image: url('../images/jwlogo.svg');
-    background-repeat: no-repeat;
-    color: var(--main-accent-color);
+/* Responsive element spacing - lg breakpoint */
+@media (min-width: 992px) {
+    .container-fluid, #main-nav {
+        padding-left: 3rem;
+        padding-right: 3rem;
+    }
+    
+    #main-nav {
+        padding-top: 3rem;
+    }
+
+    footer, h1, h2 {
+        margin-top: 3rem;
+    }
 }
 
-.navbar-light .navbar-nav .nav-link {
+/* Standard element styles */
+a {
+    color: var(--alt-accent-color);
+    text-decoration: underline;
+}
+
+a:hover {
+    color: var(--dark-alt-accent-color);
     text-decoration: none;
 }
 
-.navbar-light .navbar-nav .nav-link:hover {
-    color: var(--alt-accent-color);
-}
-
+/* Custom styles */
 .social-icons {
     font-size: 0;
 }
@@ -93,20 +113,20 @@ h1, h2, h3, h4 {
     margin-bottom: 0.25rem;
 }
 
-.social-icons a:last-child {
-  margin-right: 0;
-}
-
 .social-icons a:hover {
     background-color: var(--dark-alt-accent-color);
-    color: #fff;
+    color: white;
 }
 
-a {
+#main-nav .nav-item .nav-link {
+    color: rgba(48, 43, 68, 0.5);
+    text-decoration: none;
+}
+
+#main-nav .nav-item.active .nav-link {
+    color: var(--main-accent-color);
+}
+
+#main-nav .nav-item .nav-link:hover {
     color: var(--alt-accent-color);
-    text-decoration: underline;
-}
-
-a:hover {
-    color: var(--dark-alt-accent-color);
-    text-decoration: none;
+}