diff --git a/src/components/Container/Container.js b/src/components/Container/Container.js
index 8ed280c58fd..ab6e86f6363 100644
--- a/src/components/Container/Container.js
+++ b/src/components/Container/Container.js
@@ -30,6 +30,11 @@ const Container = ({children}: {children: Node}) => (
       [media.size('xxlarge')]: {
         maxWidth: 1260,
       },
+
+      [media.lessThan('small')]: {
+        paddingLeft: 8,
+        paddingRight: 8,
+      },
     }}>
     {children}
   </div>
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index a920a197a1a..85ef0f6498f 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -45,14 +45,11 @@ class DocSearch extends Component<{}, State> {
           paddingLeft: '0.25rem',
           paddingRight: '0.25rem',
 
-          [media.lessThan('large')]: {
+          [media.lessThan('xlarge')]: {
             justifyContent: 'flex-end',
             marginRight: 10,
           },
-          [media.between('medium', 'xlarge')]: {
-            //width: 'calc(100% / 6)',
-          },
-          [media.greaterThan('large')]: {
+          [media.greaterThan('xlarge')]: {
             minWidth: 100,
           },
         }}>
@@ -80,7 +77,7 @@ class DocSearch extends Component<{}, State> {
               borderRadius: '0.25rem',
             },
 
-            [media.lessThan('large')]: {
+            [media.lessThan('xlarge')]: {
               fontSize: 16,
               width: '16px',
               transition: 'width 0.2s ease, padding 0.2s ease',
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 4e8b6a7893a..01057168ca3 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -33,18 +33,12 @@ const Header = ({location}: {location: Location}) => (
           display: 'flex',
           flexDirection: 'row',
           alignItems: 'center',
-          height: 60,
-          [media.between('small', 'large')]: {
-            height: 50,
-          },
-          [media.lessThan('small')]: {
-            height: 40,
-          },
         }}>
         <Link
           css={{
             display: 'flex',
-            marginRight: 10,
+            flex: '0 0 auto',
+            marginRight: 8,
             height: '100%',
             alignItems: 'center',
             color: colors.brand,
@@ -53,13 +47,6 @@ const Header = ({location}: {location: Location}) => (
               outline: 0,
               color: colors.white,
             },
-
-            [media.greaterThan('small')]: {
-              width: 'calc(100% / 6)',
-            },
-            [media.lessThan('small')]: {
-              flex: '0 0 auto',
-            },
           }}
           to="/">
           <img src={logoSvg} alt="" height="20" />
@@ -102,16 +89,13 @@ const Header = ({location}: {location: Location}) => (
             height: '100%',
 
             [media.size('xsmall')]: {
+              flexWrap: 'wrap',
               flexGrow: '1',
               width: 'auto',
             },
             [media.greaterThan('xlarge')]: {
               width: null,
             },
-            [media.lessThan('small')]: {
-              maskImage:
-                'linear-gradient(to right, transparent, black 20px, black 90%, transparent)',
-            },
           }}>
           <HeaderLink
             isActive={location.pathname.includes('/docs/')}
@@ -143,17 +127,10 @@ const Header = ({location}: {location: Location}) => (
             alignItems: 'center',
             justifyContent: 'flex-end',
             width: 'auto',
-
-            //[media.lessThan('medium')]: {
-            //width: 'auto',
-            //},
-            //[media.greaterThan('large')]: {
-            //width: 'calc(100% / 4)',
-            //},
           }}>
           <Link
             css={{
-              padding: '5px 10px',
+              padding: '5px 8px',
               whiteSpace: 'nowrap',
               ...fonts.small,
 
@@ -178,7 +155,7 @@ const Header = ({location}: {location: Location}) => (
             css={{
               display: 'flex',
               alignItems: 'center',
-              padding: '5px 10px',
+              padding: '5px 8px',
               whiteSpace: 'nowrap',
               ...fonts.small,
 
@@ -207,8 +184,8 @@ const Header = ({location}: {location: Location}) => (
           </Link>
           <a
             css={{
-              padding: '5px 10px',
-              marginLeft: 10,
+              padding: '5px 8px',
+              marginLeft: 8,
               whiteSpace: 'nowrap',
               ...fonts.small,
 
diff --git a/src/components/LayoutHeader/HeaderLink.js b/src/components/LayoutHeader/HeaderLink.js
index 0534238fc41..c044d2e4b28 100644
--- a/src/components/LayoutHeader/HeaderLink.js
+++ b/src/components/LayoutHeader/HeaderLink.js
@@ -28,9 +28,15 @@ const style = {
   alignItems: 'center',
   color: colors.white,
   transition: 'color 0.2s ease-out',
-  paddingLeft: 15,
-  paddingRight: 15,
+  padding: '0 15px',
   fontWeight: 300,
+  minHeight: 60,
+  [media.between('small', 'large')]: {
+    minHeight: 50,
+  },
+  [media.lessThan('small')]: {
+    minHeight: 40,
+  },
 
   ':focus': {
     outline: 0,
@@ -39,18 +45,16 @@ const style = {
   },
 
   [media.size('xsmall')]: {
-    paddingLeft: 8,
-    paddingRight: 8,
+    padding: '0 8px',
+    fontSize: 14,
   },
 
   [media.between('small', 'medium')]: {
-    paddingLeft: 10,
-    paddingRight: 10,
+    padding: '0 10px',
   },
 
   [media.greaterThan('xlarge')]: {
-    paddingLeft: 20,
-    paddingRight: 20,
+    padding: '0 20px',
     fontSize: 18,
 
     ':hover:not(:focus)': {