Portfolio Spacing & Layout

Portfolio adjustments:
-Cleaned up container margins/padding
-Added max-width to header and Settings section
-Refined Portfolio header and nav links

Other adjustments:
-Reduced font size of side nav links

styles/components/_global_layout.scss

@@ -22,14 +22,13 @@ body {
   padding-bottom: $footer-height * 2.5;
 
   .global-panel-container {
-    margin: $gap;
     flex-grow: 1;
     -ms-flex-negative: 1;
     top: $usa-banner-height + $topbar-height;
     position: relative;
+    padding: 0 $spacing-large;
 
     @include media($medium-screen) {
-      margin: $gap * 2;
       top: $usa-banner-height + $topbar-height;
     }
   }

styles/components/_portfolio_layout.scss

@@ -4,25 +4,29 @@
     min-height: 500px;
   }
 
-  margin-left: 2 * $gap;
+  .col.col--grow {
+    padding: 0;
+  }
 }
 
 .portfolio-header {
   flex-direction: column;
+  align-items: center;
+  margin: $spacing-medium 0;
+  max-width: 90rem;
   @include media($small-screen) {
     flex-direction: row;
   }
 
-  margin-bottom: $gap * 1;
-
   .col--grow {
     overflow: inherit;
   }
 
   &__name {
     @include h1;
+    padding-right: $spacing-medium;
     h1 {
-      margin: 0 $gap ($gap * 2) 0;
+      margin: 0;
       font-size: 3.5rem;
     }
 
@@ -30,6 +34,7 @@
       font-size: $small-font-size;
       margin: 0 0 (-$gap * 0.5);
       color: $color-gray-medium;
+      max-width: 100%;
     }
   }
 
@@ -38,9 +43,15 @@
     font-size: $small-font-size;
 
     .icon-link {
-      padding: $gap;
+      padding: 0;
       border-radius: 0;
       color: $color-blue-darkest;
+      min-width: 10rem;
+      min-height: 10rem;
+
+      .col {
+        margin: 0 auto;
+      }
 
       &:hover {
         background-color: $color-aqua-lightest;
@@ -82,11 +93,19 @@
   margin-bottom: 3 * $gap;
 }
 
-.portfolio-content {
+.portfolio-admin {
-  margin: (4 * $gap) $gap 0 $gap;
+  margin: $spacing-large 0;
+  max-width: 90rem;
+}
 
+.portfolio-content {
   .panel {
     padding-bottom: 2rem;
+    max-width: 90rem;
+  }
+
+  hr {
+    max-width: 90rem;
   }
 
   a.add-new-button {
@@ -289,8 +308,8 @@
 }
 
 .portfolio-funding {
-  padding: 2 * $gap;
+  max-width: 90rem;
-  padding-top: 0;
+  margin: $spacing-large 0;
 
   .panel {
     @include shadow-panel;

styles/components/_sticky_cta.scss

@@ -20,9 +20,10 @@
   .sticky-cta-container {
     display: flex;
     align-items: center;
+    max-width: 90rem;
 
     .usa-button {
-      margin: $gap $gap * 1.5 $gap 0;
+      margin: 0;
       width: 20rem;
       height: 3.2rem;
       font-size: $small-font-size;

styles/core/_variables.scss

@@ -189,4 +189,4 @@ $spacing-x-small: 0.5rem;
 $spacing-small: 1rem;
 $spacing-md-small: 1.5rem;
 $spacing-medium: 2rem;
-$spacing-large: 3rem;
+$spacing-large: 4rem;

styles/elements/_sidenav.scss

@@ -113,8 +113,8 @@
     text-overflow: ellipsis;
 
     &--active {
-      @include h4;
+      font-size: $base-font-size;
-
+      font-weight: $font-bold;
       background-color: $color-aqua-lightest !important;
       color: $color-primary-darker !important;
       box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;