chore: Merge branch 'fix/header-align' into dev

Author: mydearxym

containers/Banner/styles/index.js

@@ -17,8 +17,6 @@ export const BaseBanner = styled.nav`
 
 export const BaseBannerContent = styled.div`
   ${cs.flex()};
-  margin-left: 8%;
-  margin-right: 8%;
   ${cs.media.mobile`
     margin-left: 4%;
     margin-right: 3%;
@@ -29,7 +27,7 @@ export const BaseTabber = styled.div`
   ${cs.flex()};
   position: absolute;
   bottom: -16px;
-  width: 80vw;
+  width: 100%;
   ${cs.media.mobile`width: 100%`};
   overflow-y: scroll;
 `

containers/CommunityBanner/styles/brief_view.js

@@ -8,25 +8,27 @@ export const Wrapper = styled(BaseBanner)`
 `
 export const BaseBannerContent = styled.div`
   ${cs.flex()};
-  margin-left: 8%;
-  margin-right: 8%;
 `
 export const BannerContainer = styled(BaseBanner)``
 
 export const TabberWrapper = styled.div`
   ${cs.flex()};
-  width: 80vw;
-  margin-left: 250px;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
   margin-top: 4px;
+  width: 100%;
+  padding: 0 15vw;
 
-  @media (min-width: 1600px) {
-    margin-left: 270px;
-  }
+  ${cs.media.desktop`
+    padding: 0 18vw;
+  `};
 
   ${cs.media.mobile`
     width: 55vw;
     overflow: scroll;
     margin-left: 45vw;
   `};
 `
-export const BannerContentWrapper = styled(BaseBannerContent)``
+export const BannerContentWrapper = styled(BaseBannerContent)`
+  width: 100%;
+  ${cs.flex('justify-center')};
+`