Uses layout elems in header

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

@@ -4,8 +4,8 @@ import styled from 'styled-components';
 
 import { Link as ReactRouterLink } from 'react-router-dom';
 
+import { Section, Wrap } from './layout';
 import { Button } from './button';
-import { Container } from './container';
 import { Logo } from './logo';
 
 interface HeaderProps {
@@ -36,8 +36,8 @@ const Link: React.StatelessComponent<LinkProps> = props => {
 };
 
 export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
-    <Container>
       <StyledHeader>
+        <HeaderWrap>
           <Link href="/next">
               <Logo/>
           </Link>
@@ -46,17 +46,14 @@ export const Header: React.StatelessComponent<HeaderProps> = ({}) => (
               {_.map(links, (link, index) => <Link key={index} href={link.url}>{link.text}</Link>)}
           </Links>
           <TradeButton href="#">Trade on 0x</TradeButton>
+        </HeaderWrap>
     </StyledHeader>
-    </Container>
 );
 
-const StyledHeader = styled.header`
-    display: flex;
-    flex-wrap: wrap;
-    text-align: center;
-    align-items: center;
+const StyledHeader = Section.withComponent('header');
+const HeaderWrap = styled(Wrap)`
   justify-content: space-between;
-    padding: 1.666666667rem 0;
+  align-items: center;
 `;
 
 const TradeButton = styled(Button)`