fix(community-page): center align center

Author: mydearxym

containers/CommunityBanner/styles/digest_view.js

@@ -11,15 +11,17 @@ export const Wrapper = styled(BaseBanner)`
   min-height: 125px;
 `
 export const InnerWrapper = styled.div`
-  max-width: ${cs.MEDIA_MAX_WIDTH};
+  ${cs.flex('justify-center')};
   width: 100%;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
 `
 export const BaseBannerContent = styled.div`
   ${cs.flex('align-center')};
+  width: 100%;
+  padding: 0 6vw;
 
-  margin-left: 8%;
-  margin-right: 7%;
   margin-top: -2rem;
+
   ${cs.media.mobile`
     margin-left: 0;
     margin-right: 3%;

containers/CommunityBanner/styles/index.js

@@ -4,9 +4,9 @@ import { theme, cs } from '@utils'
 
 export const BaseBanner = styled.nav`
   ${cs.flexColumn('justify-center')};
-  align-items: center;
-
   position: relative;
+
+  align-items: center;
   min-height: 140px;
   background: ${theme('banner.bg')};
   border-bottom: 1px solid;
@@ -24,6 +24,7 @@ export const BaseTabber = styled.div`
   width: 80vw;
   overflow-x: auto;
   overflow-y: hidden;
+
   ${cs.media.tablet`
     left: 10px;
     width: 100%;

containers/CommunityContent/index.js

@@ -17,7 +17,7 @@ import JobsThread from '@containers/JobsThread'
 import UsersThread from '@containers/UsersThread'
 import CheatsheetThread from '@containers/CheatsheetThread'
 
-import { Wrapper } from './styles'
+import { Wrapper, InnerWrapper } from './styles'
 import { useInit } from './logic'
 
 /* eslint-disable-next-line */
@@ -56,7 +56,9 @@ const CommunityContentContainer = ({ communityContent }) => {
 
   return (
     <Wrapper testid="community-content">
-      <ComunityContent curRoute={curRoute} />
+      <InnerWrapper>
+        <ComunityContent curRoute={curRoute} />
+      </InnerWrapper>
     </Wrapper>
   )
 }

containers/CommunityContent/styles/index.js

@@ -16,14 +16,21 @@ export const Wrapper = styled.div.attrs(props => ({
   border: 1px solid;
   border-color: ${theme('content.border')};
   border-radius: 6px;
-  padding: 1em;
+  padding: 1em 0;
+
   ${cs.media.tablet`
-width: 100%;
-margin: 0;
+    width: 100%;
+    margin: 0;
     margin-top: 10px;
     padding: .6em;
     padding-right: 0;
   `};
 `
-
-export const holder = 1
+export const InnerWrapper = styled.div`
+  width: 100%;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
+  padding: 0 5vw;
+  ${cs.media.desktop`
+    padding: 0 3vw;
+  `};
+`