diff --git a/.vuepress/theme/Navbar.vue b/.vuepress/theme/Navbar.vue
index 938a0488..4822dd57 100644
--- a/.vuepress/theme/Navbar.vue
+++ b/.vuepress/theme/Navbar.vue
@@ -1,19 +1,24 @@
 <template>
   <header class="nav">
     <SidebarButton class="block md:hidden flex-no-shrink" @toggle-sidebar="$emit('toggle-sidebar')"/>
-    <router-link :to="$localePath" class="home-link">
-      <img class="logo"
-        v-if="$site.themeConfig.logo"
-        :src="$withBase($site.themeConfig.logo)">
-      <span class="site-name"
-        v-if="$siteTitle"
-        :class="{ 'can-hide': $site.themeConfig.logo }">
+    <div class="logo-container">
+      <router-link :to="$localePath" class="home-link">
+        <img class="logo"
+             v-if="$site.themeConfig.logo"
+             :src="$withBase($site.themeConfig.logo)">
+        <span class="site-name"
+              v-if="$siteTitle"
+              :class="{ 'can-hide': $site.themeConfig.logo }">
         {{ $siteTitle }}
       </span>
-    </router-link>
-    <div class="flex-grow"></div>
-    <SearchBox/>
-    <NavLinks class="hidden md:flex"/>
+      </router-link>
+    </div>
+    <div class="w-full">
+      <div class="flex">
+        <SearchBox/>
+        <NavLinks class="hidden md:flex"/>
+      </div>
+    </div>
   </header>
 </template>
 
@@ -66,4 +71,4 @@ export default {
     padding-left 4rem
     .can-hide
       display none
-</style>-->
\ No newline at end of file
+</style>-->
diff --git a/.vuepress/theme/SearchBox.vue b/.vuepress/theme/SearchBox.vue
index a54e2432..bcf82ed3 100644
--- a/.vuepress/theme/SearchBox.vue
+++ b/.vuepress/theme/SearchBox.vue
@@ -12,20 +12,20 @@
       @keyup.enter="go(focusIndex)"
       @keyup.up="onUp"
       @keyup.down="onDown">
-    <ul class="suggestions"
-      v-if="showSuggestions"
-      :class="{ 'align-right': alignRight }"
-      @mouseleave="unfocus">
-      <li class="suggestion" v-for="(s, i) in suggestions"
-        :class="{ focused: i === focusIndex }"
-        @mousedown="go(i)"
-        @mouseenter="focus(i)">
-        <a :href="s.path" @click.prevent>
-          <span class="page-title">{{ s.title || s.path }}</span>
-          <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
-        </a>
-      </li>
-    </ul>
+    <div class="suggestion-container" v-if="showSuggestions" @mouseleave="unfocus">
+      <div class="suggestion-padding"></div>
+      <ul class="suggestions" :class="{ 'align-right': alignRight }">
+        <li class="suggestion" v-for="(s, i) in suggestions"
+            :class="{ focused: i === focusIndex }"
+            @mousedown="go(i)"
+            @mouseenter="focus(i)">
+          <a :href="s.path" @click.prevent>
+            <span class="page-title">{{ s.title || s.path }}</span>
+            <span v-if="s.header" class="header">&gt; {{ s.header.title }}</span>
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
diff --git a/.vuepress/theme/styles/nav.css b/.vuepress/theme/styles/nav.css
index 5a80050d..e32f8d64 100644
--- a/.vuepress/theme/styles/nav.css
+++ b/.vuepress/theme/styles/nav.css
@@ -1,5 +1,5 @@
 .nav {
-    @apply .fixed .w-full .flex .bg-blue .font-sans .border-b .border-t .border-blue-darker .px-6 .text-sm .z-20;
+    @apply .fixed .w-full .bg-blue .font-sans .border-b .border-t .border-blue-darker .px-6 .text-sm .z-20 .flex;
     height: 56px;
     line-height: 54px;
 
@@ -11,60 +11,74 @@
         }
     }
 
+    .logo-container {
+        width: 23rem; /* sidebar is 20rem + 1.5rem padding on each side for nav */
+    }
+
     .home-link {
-        @apply .block .text-white .font-light .flex-no-shrink .mr-6;
+        @apply .block .text-white .font-light .mr-6 .flex-none .w-auto;
 
         .logo {
-            @apply .h-full .float-left;
+            @apply .h-12;
         }
 
         .site-name {
-            @apply .float-left .pl-2 .text-2xl;
+            @apply .pl-2 .text-2xl;
         }
     }
 
     .search-box {
-        @apply .relative .px-2 .w-full .text-right;
+        @apply .relative .pr-4 .w-full .text-right .flex-1;
 
         input {
             transition: all 200ms ease-in;
-            @apply .text-grey-lighter .w-2/3 .outline-none .px-4 .py-2 .rounded;
+            @apply .text-grey-lighter .w-1/2 .outline-none .px-4 .py-2 .rounded;
             background: rgba(0, 0, 0, 0.2);
             border: 1px solid rgba(0, 0, 0, 0.3);
 
             &:active, &:focus {
-                @apply .w-full;
+                @apply .w-2/3;
                 transition: all 200ms ease-in;
                 background: rgba(0, 0, 0, 0.3);
                 border: 1px solid rgba(0, 0, 0, 0.7)
             }
         }
 
-        .suggestions {
-            @apply .bg-white .rounded .border .p-2 .text-left .w-full;
-            margin-top: -0.3rem;
-            list-style: none;
+        .suggestion-container {
+            @apply .w-full;
 
-            & > li > a {
-                @apply .p-2 .block;
+            .suggestion-padding {
+                @apply .w-1/3 .inline-block;
+            }
 
-                &:hover {
-                    @apply .rounded .bg-grey-lighter .no-underline .text-blue-dark;
+            .suggestions {
+                @apply .bg-white .rounded .border .p-2 .text-left .w-2/3 .inline-block;
+                margin-top: -0.3rem;
+                list-style: none;
+
+                & > li > a {
+                    @apply .p-2 .block;
+
+                    &:hover {
+                        @apply .rounded .bg-grey-lighter .no-underline .text-blue-dark;
+
+                        & > .header {
+                            @apply .text-grey-dark;
+                        }
+                    }
 
                     & > .header {
-                        @apply .text-grey-dark;
+                        @apply .text-grey .font-normal .pl-1;
+                        font-size: 0.9em;
                     }
                 }
-
-                & > .header {
-                    @apply .text-grey .font-normal .pl-1;
-                    font-size: 0.9em;
-                }
             }
         }
     }
 
     .nav-links {
+        @apply .flex-initial;
+
         .nav-link {
             @apply .text-grey-lighter .ml-6 .font-normal;