From 63699eb2c7d342fcb83f8385a75e0dbc7916439d Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Fri, 3 Feb 2017 11:57:13 +0000
Subject: [PATCH] altering header columns and changing rows to have max-width
 instead of width

---
 frontend/src/components/article/index.js | 9 ++++++---
 frontend/src/components/header/index.js  | 5 +++--
 ui/src/components/container/index.js     | 6 +++---
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js
index 716d9914..80e3b68a 100644
--- a/frontend/src/components/article/index.js
+++ b/frontend/src/components/article/index.js
@@ -3,7 +3,7 @@ const constants = require('@ui/shared/constants');
 
 const {
   colors,
-  sizes
+  breakpoints
 } = constants;
 
 const {
@@ -13,6 +13,9 @@ const {
 // Main Contonent Wrapper Styles
 module.exports = styled.article`
   background-color: ${colors.base.grey};
-  
-  ${sizes.sm}
+  padding: 2rem;
+
+  ${breakpoints.large`
+    padding: 0;
+  `}
 `;
diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
index d884abd4..17d309e8 100644
--- a/frontend/src/components/header/index.js
+++ b/frontend/src/components/header/index.js
@@ -44,6 +44,7 @@ const StyledLogo = styled.img`
 
 const StyledProfileWrapper = styled.div`
   position: relative;
+  text-align: right;
 `;
 
 const StyledAvatarWrapper = styled.div`
@@ -116,12 +117,12 @@ const Header = ({
     <StyledHeader name="application-header">
       <Container fluid>
         <Row>
-          <Column xs={2}>
+          <Column lg={10} xs={8}>
             <Link to='/'>
               <StyledLogo alt='Joyent' src={logo} />
             </Link>
           </Column>
-          <Column smOffset={8.5} xs={1.5}>
+          <Column lg={2} xs={4}>
             <StyledProfileWrapper>
               <StyledAvatarWrapper toggled={tooltip}>
                 <EmptyButton onClick={handleToggleClick}>
diff --git a/ui/src/components/container/index.js b/ui/src/components/container/index.js
index c6c53d67..e23e7727 100644
--- a/ui/src/components/container/index.js
+++ b/ui/src/components/container/index.js
@@ -28,14 +28,14 @@ module.exports = styled.div`
   ${fluid}
 
   ${breakpoints.small`
-    width: ${sizes.containerSm || '46rem'};
+    max-width: ${sizes.containerSm || '46rem'};
   `}
 
   ${breakpoints.medium`
-    width: ${sizes.containerMd || '61rem'};
+    max-width: ${sizes.containerMd || '61rem'};
   `}
 
   ${breakpoints.large`
-    width: ${sizes.containerLg || '71rem'};
+    max-width: ${sizes.containerLg || '71rem'};
   `}
 `;