diff --git a/client/less/challenge.less b/client/less/challenge.less
index 262277f458..ceaf40c2a8 100644
--- a/client/less/challenge.less
+++ b/client/less/challenge.less
@@ -1,6 +1,10 @@
-.challenges-editor {
-  height: 100%;
-  width: 99%;
+.challenges-instructions-panel {
+  clear: both;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-bottom: 10px;
 }
 
 .challenge-step-description {
@@ -135,38 +139,6 @@
   color: @alert-info-bg;
 }
 
-iframe.iphone {
-  border: none;
-  @media(min-width: 992px) {
-    width: 280px;
-    height: 500px;
-    position: absolute;
-    top: 70px;
-    right: 35px;
-    overflow-y: scroll;
-  }
-  @media(max-width: 991px) {
-    width: 100%;
-    border-radius: 5px;
-    overflow-y: visible;
-    height: 500px;
-  }
-  @media (min-width: 1200px) and (max-width: 1250px){
-    right: 22px;
-  }
-}
-
-// To adjust right margin, negative values bring the image closer to the edge of the screen
-.iphone-position {
-  position: absolute;
-  top: -45px;
-  z-index: -1;
-  right: -195px;
-  @media (min-width: 1200px) and (max-width: 1250px){
-    right: -207px;
-  }
-}
-
 .night {
   .challenge-instructions blockquote {
     background-color: #242424;
@@ -191,3 +163,58 @@ iframe.iphone {
     }
   }
 }
+
+.challenges-editor {
+  height: auto;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.challenges-preview {
+  clear: both;
+  overflow: hidden;
+}
+
+@media only screen and (min-width: 993px) {
+  .iframe-scroll {
+    z-index: 1;
+  }
+}
+@media only screen and (max-width: 992px) {
+  .iframe-scroll {
+    height: auto;
+    overflow: auto;
+  }
+}
+
+iframe.iphone {
+  border: none;
+  @media(min-width: 992px) {
+    width: 280px;
+    height: 497px;
+    position: absolute;
+    top: 75px;
+    right: 35px;
+    overflow-y: scroll;
+  }
+  @media(max-width: 991px) {
+    width: 100%;
+    border-radius: 5px;
+    overflow-y: visible;
+    height: 500px;
+  }
+  @media (min-width: 1200px) and (max-width: 1250px){
+    right: 22px;
+  }
+}
+
+// To adjust right margin, negative values bring the image closer to the edge of the screen
+.iphone-position {
+  position: absolute;
+  top: -45px;
+  z-index: -1;
+  right: -195px;
+  @media (min-width: 1200px) and (max-width: 1250px){
+    right: -207px;
+  }
+}
\ No newline at end of file
diff --git a/client/less/drawers.less b/client/less/drawers.less
index aa256ab9ae..4ac8797949 100644
--- a/client/less/drawers.less
+++ b/client/less/drawers.less
@@ -44,6 +44,22 @@
       width: 100%;
       height: 100%;
     }
+
+    h2 > a {
+      font-size: 20px;
+    }
+    a > h3 {
+      font-size: 18px;
+      font-weight: bold;
+    }
+    p {
+      font-size: 16px;
+      margin-left: 32px !important;
+    }
+    > .challenge-block-time {
+      width: 100%;
+      padding-top: 5px;
+    }
 }
 
 .drawer-content {
diff --git a/client/less/main.less b/client/less/main.less
index 7839a7ea92..334356617d 100644
--- a/client/less/main.less
+++ b/client/less/main.less
@@ -69,7 +69,11 @@ body.no-top-and-bottom-margins {
 
 body.react-layout {
   margin-top: 75px;
-  margin-bottom: 0px;
+  margin-bottom: 15px;
+  width: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+  min-height: 650px;
 }
 
 h1, h2 {
@@ -906,18 +910,6 @@ code {
   padding: 1px 5px;
 }
 
-@media only screen and (min-width: 993px) {
-  .iframe-scroll {
-    z-index: 1;
-  }
-}
-@media only screen and (max-width: 992px) {
-  .iframe-scroll {
-    height: auto;
-    overflow: auto;
-  }
-}
-
 // Calculator styles
 
 .chart rect {
diff --git a/client/less/map.less b/client/less/map.less
index 89bd78f43f..3a2311aa28 100644
--- a/client/less/map.less
+++ b/client/less/map.less
@@ -118,19 +118,10 @@
     cursor: pointer;
   }
 
-  a {
-    margin:15px 0;
-    padding:0;
-
-    &:first-child {
-      margin-top:25px
-    }
-
-    > h3 {
-      padding-left: 40px;
-      padding-bottom: 10px;
-      display: block;
-    }
+  a > h3 {
+    padding-left: 40px;
+    padding-bottom: 10px;
+    display: block;
   }
 
   .map-accordion-block {
diff --git a/client/sagas/execute-challenge-saga.js b/client/sagas/execute-challenge-saga.js
index 96b7c6e566..c1bda6cb76 100644
--- a/client/sagas/execute-challenge-saga.js
+++ b/client/sagas/execute-challenge-saga.js
@@ -136,7 +136,7 @@ export default function executeChallengeSaga(action$, getState) {
           return Observable.combineLatest(head$, frameRunner$)
             .map(([ head, frameRunner ]) => {
               const body = `
-                <body>
+                <body style='margin:8px;'>
                   <!-- fcc-start-source -->
                     ${source}
                   <!-- fcc-end-source -->
diff --git a/common/app/routes/challenges/components/classic/Classic.jsx b/common/app/routes/challenges/components/classic/Classic.jsx
index 5021d9edfb..e463ae6d60 100644
--- a/common/app/routes/challenges/components/classic/Classic.jsx
+++ b/common/app/routes/challenges/components/classic/Classic.jsx
@@ -86,13 +86,13 @@ export class Challenge extends PureComponent {
     return (
       <div>
         <Col
-          lg={ 3 }
+          lg={ showPreview ? 3 : 4 }
           md={ showPreview ? 3 : 4 }
           >
           <SidePanel />
         </Col>
         <Col
-          lg={ showPreview ? 6 : 9 }
+          lg={ showPreview ? 6 : 8 }
           md={ showPreview ? 5 : 8 }
           >
           <Editor
diff --git a/common/app/routes/challenges/components/classic/Preview.jsx b/common/app/routes/challenges/components/classic/Preview.jsx
index 748e58c7f6..21f42aa846 100644
--- a/common/app/routes/challenges/components/classic/Preview.jsx
+++ b/common/app/routes/challenges/components/classic/Preview.jsx
@@ -7,7 +7,9 @@ export default class extends PureComponent {
 
   render() {
     return (
-      <div>
+      <div
+       className='challenges-preview'
+       >
         <div className='hidden-xs hidden-md'>
           <img
             className='iphone-position iframe-scroll'
diff --git a/common/app/routes/challenges/components/classic/Side-Panel.jsx b/common/app/routes/challenges/components/classic/Side-Panel.jsx
index f329c98e5b..4175f9c122 100644
--- a/common/app/routes/challenges/components/classic/Side-Panel.jsx
+++ b/common/app/routes/challenges/components/classic/Side-Panel.jsx
@@ -108,15 +108,13 @@ export class SidePanel extends PureComponent {
       toggleHelpChat,
       openBugModal
     } = this.props;
-    const style = {
-      overflowX: 'hidden',
-      overflowY: 'auto'
-    };
+    const style = {};
     if (height) {
       style.height = height + 'px';
     }
     return (
       <div
+        className='challenges-instructions-panel'
         ref='panel'
         style={ style }
         >