Hides mobile nav on desktop, adds flexwrap maxwidth

packages/website/ts/@next/components/mobileNav.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import MediaQuery from 'react-responsive';
 import styled from 'styled-components';
 
 import {Link} from 'react-router-dom';
@@ -15,6 +16,7 @@ export class MobileNav extends React.PureComponent<Props> {
         const { isToggled, toggleMobileNav } = this.props;
 
         return (
+            <MediaQuery maxWidth={800}>
                 <Wrap isToggled={isToggled}>
                     <Section>
                         <h4>Products</h4>
@@ -34,7 +36,7 @@ export class MobileNav extends React.PureComponent<Props> {
                     </Section>
 
                     <Section isDark={true}>
-                    <Grid as="ul" isWrapped={true}>
+                        <Grid as="ul" width="100%" isWrapped={true}>
                             <li>
                                 <Link to="/next/why">
                                     Why 0x
@@ -62,6 +64,7 @@ export class MobileNav extends React.PureComponent<Props> {
                         <Overlay onClick={toggleMobileNav} />
                     }
                 </Wrap>
+            </MediaQuery>
         );
     }
 }

packages/website/ts/@next/components/newLayout.tsx

@@ -69,6 +69,8 @@ export const Column = styled.div<ColumnProps>`
 `;
 
 export const FlexWrap = styled.div<FlexProps>`
+    max-width: 1500px;
+    margin: 0 auto;
     padding: ${props => props.padding};
 
     @media (min-width: ${props => props.flexBreakpoint || '768px'}) {