studio - wraps nav elements in floated containers for easier layout

cms/static/sass/elements/_header.scss

@@ -22,6 +22,23 @@
   // ====================
 
   // basic layout
+
+  .wrapper-l, .wrapper-r {
+    background: $white;
+  }
+
+  .wrapper-l {
+    float: left;
+    margin-right: flex-gutter();
+    width: flex-grid(7,12);
+  }
+
+  .wrapper-r {
+    float: right;
+    width: flex-grid(4,12);
+    text-align: right;
+  }
+
   .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
     @include box-sizing(border-box);
     display: inline-block;
@@ -29,13 +46,6 @@
   }
 
   // basic layout - nav items
-  .nav-item {
-
-    .title {
-
-    }
-  }
-
   nav {
 
     > ol > .nav-item {
@@ -116,9 +126,9 @@
 
   // specific elements - course name/info
   .info-course {
-    margin-right: ($baseline*0.75);
+    margin-right: flex-gutter();
     border-right: 1px solid $gray-l4;
-    padding: ($baseline*0.75) $baseline ($baseline*0.75) 0;
+    padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
     .course-org, .course-number {
       @extend .t-action4;
@@ -169,7 +179,6 @@
   .nav-account {
     position: relative;
     padding: ($baseline*0.75) 0;
-    text-align: right;
 
     .nav-sub {
       text-align: left;
@@ -199,7 +208,6 @@
   .nav-pitch {
     position: relative;
     padding: ($baseline*0.75) 0;
-    text-align: right;
 
     .nav-sub {
       text-align: left;
@@ -212,16 +220,21 @@
 // CASE: user signed in
 .is-signedin {
 
-  .wrapper-header {
+  .wrapper-l {
+    width: flex-grid(9,12);
+  }
+
+  .wrapper-r {
+    width: flex-grid(3,12);
+  }
 
   .branding {
-      width: 15%;
+    width: 20%;
     margin-right: 2%;
   }
 
   .nav-account {
-      width: 80%;
-    }
+    top: ($baseline/4);
   }
 }
 
@@ -232,21 +245,26 @@
 
   .wrapper-header {
 
+    .wrapper-l {
+      width: flex-grid(9,12);
+    }
+
+    .wrapper-r {
+      width: flex-grid(3,12);
+    }
+
     .branding {
-      width: 15%;
+      width: 20%;
       margin-right: 2%;
     }
 
     .info-course {
       width: 25%;
+      margin-right: 2%;
     }
 
     .nav-course {
-      width: 34%;
-    }
-
-    .nav-account {
-      width: 20%;
+      width: 45%;
     }
   }
 }
@@ -258,13 +276,20 @@
 
   .wrapper-header {
 
+    .wrapper-l {
+      width: flex-grid(2,12);
+    }
+
+    .wrapper-r {
+      width: flex-grid(10,12);
+    }
+
     .branding {
-      width: 15%;
-      margin-right: 2%;
+      width: 100%;
     }
 
     .nav-pitch {
-      width: 80%;
+      top: ($baseline/4);
 
       .nav-item {
         margin-right: ($baseline/2);

cms/templates/widgets/header.html

@@ -2,6 +2,7 @@
 <div class="wrapper-header wrapper" id="view-top">
   <header class="primary" role="banner">
 
+    <div class="wrapper wrapper-l">
       <h1 class="branding"><a href="/"><img src="/static/img/logo-edx-studio.png" alt="edX Studio" /></a></h1>
 
       % if context_course:
@@ -86,7 +87,9 @@
         </ol>
       </nav>
       % endif
+    </div>
 
+    <div class="wrapper wrapper-r">
       % if user.is_authenticated():
       <nav class="nav-account nav-is-signedin nav-dd ui-right">
         <h2 class="sr">Help &amp; Account Navigation</h2>
@@ -153,5 +156,6 @@
         </ol>
       </nav>
       % endif
+    </div>
   </header>
 </div>