flexbox this thing

- drop the table styles, use flex
- remove commented out code
- consolidate styles a bit
- add a huge flex-grow to the nav, making the assumption you want nav to take up most space

scss/_navbar.scss

@@ -5,95 +5,41 @@
 
 .navbar {
   position: relative;
-  // padding: $navbar-padding-y $navbar-padding-x;
-  // @include clearfix;
-
-  // @include media-breakpoint-up(sm) {
-  //   @include border-radius($navbar-border-radius);
-  // }
+  padding: $navbar-padding-y $navbar-padding-x;
 }
 
 .navbar-container {
   @include media-breakpoint-up(sm) {
-    display: table;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: nowrap;
+    align-items: center;
     width: 100%;
 
-    // .navbar-container-justified
+    // // .navbar-container-justified
     &-justified {
-      table-layout: fixed;
-    }
-  }
-}
-
-.navbar-item {
-  display: block;
-  padding: $navbar-padding-y $navbar-padding-x;
-  // padding: .5rem .75rem;
-  vertical-align: middle;
-
-  @include media-breakpoint-up(sm) {
-    display: table-cell;
-    white-space: nowrap;
-
-    // .navbar-item-primary
-    &-primary {
-      width: 99%;
-
-      ~ .navbar-item {
-        width: 1%;
-      }
-    }
-  }
-}
-
-.navbar-nav {
-  // .nav-item {
-  //   display: block;
-  // }
-
-  .nav-link {
-    display: block;
-    padding: .425rem .5rem;
-  }
-
-  @include media-breakpoint-up(sm) {
-    .nav-item {
-      display: inline-block;
+      justify-content: space-between; // todo: drop for util
     }
   }
 }
 
 .navbar-toggler-left {
   position: absolute;
-  // top: $navbar-padding-y;
   left: $navbar-padding-x;
 }
 
 .navbar-toggler-right {
   position: absolute;
-  // top: $navbar-padding-y;
   right: $navbar-padding-x;
 }
 
 
-// .navbar-collapse-sm
-
-
 
 // Navbar alignment options
 //
 // Display the navbar across the entirety of the page or fixed it to the top or
 // bottom of the page.
 
-// A static, full width modifier with no rounded corners.
-// .navbar-full {
-//   z-index: $zindex-navbar;
-//
-//   @include media-breakpoint-up(sm) {
-//     @include border-radius(0);
-//   }
-// }
-
 // Fix the top/bottom navbars when screen real estate supports it
 .navbar-fixed-top,
 .navbar-fixed-bottom {
@@ -134,10 +80,6 @@
 //
 
 .navbar-brand {
-  // float: left;
-  // padding-top: $navbar-brand-padding-y;
-  // padding-bottom: $navbar-brand-padding-y;
-  // margin-right: 1rem;
   display: inline-block;
   padding: .25rem .5rem;
   font-size: $font-size-lg;
@@ -200,25 +142,21 @@
 //
 // Custom navbar navigation built on the base `.nav` styles.
 
-// .navbar-nav {
-//   .nav-item {
-//     float: left;
-//   }
-//
-//   .nav-link {
-//     display: block;
-//     padding-top:    .425rem;
-//     padding-bottom: .425rem;
-//
-//     + .nav-link {
-//       margin-left: 1rem;
-//     }
-//   }
-//
-//   .nav-item + .nav-item {
-//     margin-left: 1rem;
-//   }
-// }
+.navbar-nav {
+  flex-grow: 10; // high number to force alignment
+
+  .nav-link {
+    display: block;
+    padding: .425rem .5rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .nav-item {
+      display: inline-block;
+    }
+  }
+}
+
 
 // Dark links against a light background
 .navbar-light {
@@ -330,31 +268,16 @@
       @include clearfix;
 
       @include media-breakpoint-down($breakpoint) {
-        // .navbar-brand {
-        //   display: block;
-        //   float: none;
-        //   margin-top: .5rem;
-        //   margin-right: 0;
-        // }
-
         .navbar-nav {
-          // margin-top: .5rem;
-          // margin-bottom: .5rem;
-
           .dropdown-menu {
             position: static;
             float: none;
           }
-
-          // .nav-item {
-          //   float: none;
-          //   margin-left: 0;
-          // }
         }
       }
 
       @include media-breakpoint-up($next) {
-        display: table-cell !important;
+        display: flex !important;
         width: 100%;
       }
     }