Center top bar on landing page and for not logged in user

app/styles/app/landing.sass

@@ -1,3 +1,8 @@
+.top.landing-page,
+.wrapper.centered .top
+  margin: 0 auto
+  max-width: 1200px
+
 #landing
   margin: 0 auto
   max-width: 1200px
@@ -170,4 +175,4 @@
     p
       font-size: 1.15em
       font-weight: 300
-      color: #606162
+      color: #606162

app/styles/app/layout.sass

@@ -63,13 +63,13 @@
     margin-left: -100%
     max-width: 325px
 
-  .wrapper-main.non-centered
+  .non-centered .wrapper-main
     width: grid-calc(18, 24)
     float: left
     margin-left: grid-calc(6, 24)
     overflow: visible
 
-  .wrapper-main.centered
+  .centered .wrapper-main
     max-width: 1024px
     margin-left: auto
     margin-right: auto
@@ -77,21 +77,21 @@
 @media #{$xlarge-up}
   #left
     width: grid-calc(7, 36)
-  .wrapper-main.non-centered
+  .non-centered .wrapper-main
     width: grid-calc(29, 36)
     margin-left: grid-calc(7, 36)
 
 @media #{$xxlarge-up}
   #left
     width: grid-calc(6, 36)
-  .wrapper-main.non-centered
+  .non-centered .wrapper-main
     width: grid-calc(30, 36)
     margin-left: grid-calc(6, 36)
 
 @media screen and (min-width: 2200px)
   #left
     width: grid-calc(5, 36)
-  .wrapper-main.non-centered
+  .non-centered .wrapper-main
     width: grid-calc(31, 36)
     margin-left: grid-calc(5, 36)
 

app/templates/layouts/home.hbs

@@ -1,4 +1,4 @@
-<div class="wrapper">
+<div {{bind-attr class=":wrapper auth.signedIn:non-centered:centered"}}>
 
   <header id="top" class="top">
     {{render "top"}}
@@ -6,7 +6,7 @@
 
   {{render "flash"}}
 
-  <div {{bind-attr class=":wrapper-main auth.signedIn:non-centered:centered"}}>
+  <div class="wrapper-main">
     <div id="main" role="main">
       {{yield}}
     </div>

app/templates/layouts/landing-page.hbs

@@ -1,4 +1,4 @@
-<div id="top" class="top">
+<div id="top" class="top landing-page">
   {{render "top"}}
 </div>