Fixes fullwidth sections

3 files changed, 5 insertions, 13 deletions

diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index f4cf19e29..1ac9fccfc 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -80,6 +80,8 @@ export const WrapSticky = styled.div<WrapProps>`
 `;
 
 const SectionBase = styled.section<SectionProps>`
+    width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
+    max-width: 1500px;
     margin: 0 auto;
     padding: ${props => props.isPadded && '120px 0'};
     background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
@@ -92,7 +94,6 @@ const SectionBase = styled.section<SectionProps>`
 `;
 
 const Wrap = styled(FlexWrap)<WrapProps>`
-    width: calc(100% - 60px);
     max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
     text-align: ${props => props.isTextCentered && 'center'};
     margin: 0 auto;
diff --git a/packages/website/ts/@next/components/sections/landing/cta.tsx b/packages/website/ts/@next/components/sections/landing/cta.tsx
index b90b4070e..b387c2418 100644
--- a/packages/website/ts/@next/components/sections/landing/cta.tsx
+++ b/packages/website/ts/@next/components/sections/landing/cta.tsx
@@ -15,8 +15,8 @@ interface Props {
 export const SectionLandingCta = (props: Props) => (
     <Section
         isPadded={false}
-        isFullWidth={true}
         isFlex={true}
+        maxWidth="auto"
         flexBreakpoint="900px"
     >
         <BlockIconLink
diff --git a/packages/website/ts/@next/components/siteWrap.tsx b/packages/website/ts/@next/components/siteWrap.tsx
index abbd27845..eb2569f3d 100644
--- a/packages/website/ts/@next/components/siteWrap.tsx
+++ b/packages/website/ts/@next/components/siteWrap.tsx
@@ -69,21 +69,12 @@ export const SiteWrap: React.StatelessComponent<Props> = props => {
                 <>
                     <GlobalStyles />
                     <Header />
-                    <Main>
+                    <main>
                         {children}
-                    </Main>
+                    </main>
                     <Footer/>
                 </>
             </ThemeProvider>
         </>
     );
 };
-
-export const Main = styled.main`
-    max-width: 1500px;
-    margin: 0 auto;
-
-    @media (min-width: 768px) {
-        width: calc(100% - 60px);
-    }
-`;