diff --git a/packages/netlify-cms-core/src/components/App/App.js b/packages/netlify-cms-core/src/components/App/App.js
index 698158d2..41f8d344 100644
--- a/packages/netlify-cms-core/src/components/App/App.js
+++ b/packages/netlify-cms-core/src/components/App/App.js
@@ -72,7 +72,6 @@ class App extends React.Component {
     return (
       <ErrorContainer>
         <h1>{t('app.app.errorHeader')}</h1>
-
         <div>
           <strong>{t('app.app.configErrors')}:</strong>
           <ErrorCodeBlock>{config.get('error')}</ErrorCodeBlock>
@@ -160,7 +159,7 @@ class App extends React.Component {
     const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
 
     return (
-      <div>
+      <>
         <Notifs CustomComponent={Toast} />
         <Header
           user={user}
@@ -174,27 +173,25 @@ class App extends React.Component {
         />
         <AppMainContainer>
           {isFetching && <TopBarProgress />}
-          <div>
-            <Switch>
-              <Redirect exact from="/" to={defaultPath} />
-              <Redirect exact from="/search/" to={defaultPath} />
-              {hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
-              <Route exact path="/collections/:name" component={Collection} />
-              <Route
-                path="/collections/:name/new"
-                render={props => <Editor {...props} newRecord />}
-              />
-              <Route path="/collections/:name/entries/:slug" component={Editor} />
-              <Route
-                path="/search/:searchTerm"
-                render={props => <Collection {...props} isSearchResults />}
-              />
-              <Route component={NotFoundPage} />
-            </Switch>
-            {useMediaLibrary ? <MediaLibrary /> : null}
-          </div>
+          <Switch>
+            <Redirect exact from="/" to={defaultPath} />
+            <Redirect exact from="/search/" to={defaultPath} />
+            {hasWorkflow ? <Route path="/workflow" component={Workflow} /> : null}
+            <Route exact path="/collections/:name" component={Collection} />
+            <Route
+              path="/collections/:name/new"
+              render={props => <Editor {...props} newRecord />}
+            />
+            <Route path="/collections/:name/entries/:slug" component={Editor} />
+            <Route
+              path="/search/:searchTerm"
+              render={props => <Collection {...props} isSearchResults />}
+            />
+            <Route component={NotFoundPage} />
+          </Switch>
+          {useMediaLibrary ? <MediaLibrary /> : null}
         </AppMainContainer>
-      </div>
+      </>
     );
   }
 }
diff --git a/packages/netlify-cms-core/src/components/App/Header.js b/packages/netlify-cms-core/src/components/App/Header.js
index b3301db0..6e52dbbc 100644
--- a/packages/netlify-cms-core/src/components/App/Header.js
+++ b/packages/netlify-cms-core/src/components/App/Header.js
@@ -22,13 +22,9 @@ const styles = {
   `,
 };
 
-const AppHeaderContainer = styled.header`
-  z-index: 300;
-`;
-
-const AppHeader = styled.div`
+const AppHeader = styled.header`
   ${shadows.dropMain};
-  position: fixed;
+  position: sticky;
   width: 100%;
   top: 0;
   background-color: ${colors.foreground};
@@ -136,59 +132,57 @@ class Header extends React.Component {
       .toList();
 
     return (
-      <AppHeaderContainer>
-        <AppHeader>
-          <AppHeaderContent>
-            <nav>
-              <AppHeaderNavLink
-                to="/"
-                activeClassName="header-link-active"
-                isActive={(match, location) => location.pathname.startsWith('/collections/')}
-              >
-                <Icon type="page" />
-                {t('app.header.content')}
+      <AppHeader>
+        <AppHeaderContent>
+          <nav>
+            <AppHeaderNavLink
+              to="/"
+              activeClassName="header-link-active"
+              isActive={(match, location) => location.pathname.startsWith('/collections/')}
+            >
+              <Icon type="page" />
+              {t('app.header.content')}
+            </AppHeaderNavLink>
+            {hasWorkflow ? (
+              <AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
+                <Icon type="workflow" />
+                {t('app.header.workflow')}
               </AppHeaderNavLink>
-              {hasWorkflow ? (
-                <AppHeaderNavLink to="/workflow" activeClassName="header-link-active">
-                  <Icon type="workflow" />
-                  {t('app.header.workflow')}
-                </AppHeaderNavLink>
-              ) : null}
-              {showMediaButton ? (
-                <AppHeaderButton onClick={openMediaLibrary}>
-                  <Icon type="media-alt" />
-                  {t('app.header.media')}
-                </AppHeaderButton>
-              ) : null}
-            </nav>
-            <AppHeaderActions>
-              {createableCollections.size > 0 && (
-                <Dropdown
-                  renderButton={() => (
-                    <AppHeaderQuickNewButton> {t('app.header.quickAdd')}</AppHeaderQuickNewButton>
-                  )}
-                  dropdownTopOverlap="30px"
-                  dropdownWidth="160px"
-                  dropdownPosition="left"
-                >
-                  {createableCollections.map(collection => (
-                    <DropdownItem
-                      key={collection.get('name')}
-                      label={collection.get('label_singular') || collection.get('label')}
-                      onClick={() => this.handleCreatePostClick(collection.get('name'))}
-                    />
-                  ))}
-                </Dropdown>
-              )}
-              <SettingsDropdown
-                displayUrl={displayUrl}
-                imageUrl={user.get('avatar_url')}
-                onLogoutClick={onLogoutClick}
-              />
-            </AppHeaderActions>
-          </AppHeaderContent>
-        </AppHeader>
-      </AppHeaderContainer>
+            ) : null}
+            {showMediaButton ? (
+              <AppHeaderButton onClick={openMediaLibrary}>
+                <Icon type="media-alt" />
+                {t('app.header.media')}
+              </AppHeaderButton>
+            ) : null}
+          </nav>
+          <AppHeaderActions>
+            {createableCollections.size > 0 && (
+              <Dropdown
+                renderButton={() => (
+                  <AppHeaderQuickNewButton> {t('app.header.quickAdd')}</AppHeaderQuickNewButton>
+                )}
+                dropdownTopOverlap="30px"
+                dropdownWidth="160px"
+                dropdownPosition="left"
+              >
+                {createableCollections.map(collection => (
+                  <DropdownItem
+                    key={collection.get('name')}
+                    label={collection.get('label_singular') || collection.get('label')}
+                    onClick={() => this.handleCreatePostClick(collection.get('name'))}
+                  />
+                ))}
+              </Dropdown>
+            )}
+            <SettingsDropdown
+              displayUrl={displayUrl}
+              imageUrl={user.get('avatar_url')}
+              onLogoutClick={onLogoutClick}
+            />
+          </AppHeaderActions>
+        </AppHeaderContent>
+      </AppHeader>
     );
   }
 }
diff --git a/packages/netlify-cms-ui-default/src/styles.js b/packages/netlify-cms-ui-default/src/styles.js
index d0ca6598..3433db87 100644
--- a/packages/netlify-cms-ui-default/src/styles.js
+++ b/packages/netlify-cms-ui-default/src/styles.js
@@ -87,7 +87,7 @@ const lengths = {
   richTextEditorMinHeight: '300px',
   borderWidth: '2px',
   topCardWidth: '682px',
-  pageMargin: '84px 18px',
+  pageMargin: '28px 18px',
 };
 
 const borders = {