altering header columns and changing rows to have max-width instead of width

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};
+  padding: 2rem;
 
-  ${sizes.sm}
+  ${breakpoints.large`
+    padding: 0;
+  `}
 `;

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}>

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'};
   `}
 `;