diff --git a/web-app/src/components/Card/index.tsx b/web-app/src/components/Card/index.tsx
index 78b6f008..62edc14b 100644
--- a/web-app/src/components/Card/index.tsx
+++ b/web-app/src/components/Card/index.tsx
@@ -1,6 +1,13 @@
 import * as React from 'react'
 import { Card as AlifdCard } from '@alifd/next'
 
+const styles = {
+  card: {
+    display: 'flex',
+    width: '100%',
+  },
+}
+
 interface Props {
   children: React.ReactNode
   onClick?: () => void
@@ -8,7 +15,12 @@ interface Props {
 }
 
 const Card = (props: Props) => (
-  <AlifdCard showTitleBullet={false} contentHeight="auto" onClick={props.onClick} style={props.style}>
+  <AlifdCard
+    showTitleBullet={false}
+    contentHeight="auto"
+    onClick={props.onClick}
+    style={{ ...styles.card, ...props.style }}
+  >
     {props.children}
   </AlifdCard>
 )
diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx
index b947e123..06131a79 100644
--- a/web-app/src/components/Workspace/index.tsx
+++ b/web-app/src/components/Workspace/index.tsx
@@ -5,8 +5,8 @@ interface Props {
 }
 
 const resize = () => ({
-  width: window.innerWidth - 20,
-  height: window.innerHeight - 20,
+  minWidth: window.innerWidth - 20,
+  minHeight: window.innerHeight - 20,
 })
 
 const Workspace = ({ children }: Props) => {
@@ -19,7 +19,7 @@ const Workspace = ({ children }: Props) => {
 
   const styles = {
     page: {
-			display: 'flex' as 'flex',
+      display: 'flex' as 'flex',
       margin: 0,
       backgroundColor: 'white',
     },
diff --git a/web-app/src/containers/Continue/index.tsx b/web-app/src/containers/Continue/index.tsx
index 634b08fa..7b4fc4a8 100644
--- a/web-app/src/containers/Continue/index.tsx
+++ b/web-app/src/containers/Continue/index.tsx
@@ -4,6 +4,12 @@ import Card from '../../components/Card'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
 
+const styles = {
+  page: {
+    width: '100%',
+  },
+}
+
 interface Props {
   tutorial: G.Tutorial
   onContinue(): void
@@ -11,7 +17,7 @@ interface Props {
 }
 
 export const ContinuePage = (props: Props) => (
-  <div>
+  <div style={styles.page}>
     <h3>Continue</h3>
     <Card>
       <div>
diff --git a/web-app/src/containers/LoadingPage.tsx b/web-app/src/containers/LoadingPage.tsx
index 030cb3b4..a9034be8 100644
--- a/web-app/src/containers/LoadingPage.tsx
+++ b/web-app/src/containers/LoadingPage.tsx
@@ -10,8 +10,7 @@ const styles = {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    width: window.innerWidth - 20,
-    height: window.innerHeight - 20,
+    width: '100%',
   },
 }
 
diff --git a/web-app/src/containers/New/NewPage.tsx b/web-app/src/containers/New/NewPage.tsx
index 89a216dc..0aeb52ef 100644
--- a/web-app/src/containers/New/NewPage.tsx
+++ b/web-app/src/containers/New/NewPage.tsx
@@ -3,6 +3,9 @@ import * as G from 'typings/graphql'
 import TutorialList from './TutorialList'
 
 const styles = {
+  page: {
+    width: '100%',
+  },
   header: {
     height: '36px',
     backgroundColor: '#EBEBEB',
@@ -22,7 +25,7 @@ interface Props {
 }
 
 const NewPage = (props: Props) => (
-  <div>
+  <div style={styles.page}>
     <div style={styles.header}>
       <span>CodeRoad</span>
     </div>
diff --git a/web-app/src/containers/New/TutorialItem.tsx b/web-app/src/containers/New/TutorialItem.tsx
deleted file mode 100644
index 6623963e..00000000
--- a/web-app/src/containers/New/TutorialItem.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as React from 'react'
-import Button from '../../components/Button'
-import Card from '../../components/Card'
-
-interface Props {
-  title: string
-  description: string
-  onContinue(): void
-}
-
-const TutorialItem = (props: Props) => {
-  return (
-    <Card>
-      <div>
-        <h2>{props.title}</h2>
-        <p>{props.description}</p>
-        <Button onClick={props.onContinue}>Resume</Button>
-      </div>
-    </Card>
-  )
-}
-
-export default TutorialItem
diff --git a/web-app/src/containers/Overview/OverviewPage.tsx b/web-app/src/containers/Overview/OverviewPage.tsx
index f0b6447f..7da0aacd 100644
--- a/web-app/src/containers/Overview/OverviewPage.tsx
+++ b/web-app/src/containers/Overview/OverviewPage.tsx
@@ -5,6 +5,9 @@ import * as G from 'typings/graphql'
 import Markdown from '../../components/Markdown'
 
 const styles = {
+  page: {
+    width: '100%',
+  },
   summary: {
     padding: '0rem 1rem 1rem 1rem',
   },
@@ -47,7 +50,7 @@ interface Props {
 }
 
 const Summary = ({ title, description, levels, onNext }: Props) => (
-  <div>
+  <div style={styles.page}>
     <div style={styles.header}>
       <span>CodeRoad</span>
     </div>
diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx
index a18ede0d..7c8ef5c5 100644
--- a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx
+++ b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx
@@ -9,6 +9,7 @@ import Markdown from '../../../../components/Markdown'
 const styles = {
   card: {
     padding: 0,
+    width: '100%',
   },
   header: {
     height: '36px',
diff --git a/web-app/stories/utils/SideBarDecorator.tsx b/web-app/stories/utils/SideBarDecorator.tsx
index 579f0383..5c7acd65 100644
--- a/web-app/stories/utils/SideBarDecorator.tsx
+++ b/web-app/stories/utils/SideBarDecorator.tsx
@@ -4,9 +4,8 @@ const styles = {
   container: {
     position: 'relative' as 'relative',
     boxSizing: 'border-box' as 'border-box',
-    maxWidth: '20rem',
     borderRight: '2px solid black',
-    width: '20rem',
+    width: '100%',
     height: window.innerHeight,
   },
 }