From dd55b5590ee8018b5adbfdee3a015e9853afd5c5 Mon Sep 17 00:00:00 2001
From: Cayla Hamann <chamann@newrelic.com>
Date: Mon, 15 Jun 2020 14:00:58 -0400
Subject: [PATCH] WIP: fixing layout bug

---
 src/components/BreadcrumbBar.js             |  27 ++---
 src/components/Container.js                 |  15 ---
 src/components/Container.module.scss        |   6 -
 src/components/Footer.js                    |  13 +-
 src/components/Footer.module.scss           |  10 --
 src/components/GuideListing/GuideListing.js |   5 +-
 src/components/Header.js                    |  81 +++++--------
 src/components/Jumbotron.js                 |  59 +++++-----
 src/components/Layout.js                    |  11 +-
 src/components/Layout.module.scss           |  18 +--
 src/components/Sidebar.js                   |   2 +-
 src/components/Sidebar.module.scss          |   3 -
 src/components/styles.scss                  |   4 +
 src/pages/index.js                          |  64 +++++-----
 src/templates/ApiReferenceTemplate.js       |  80 ++++++-------
 src/templates/ComponentReferenceTemplate.js | 124 +++++++++-----------
 src/templates/GuideTemplate.js              |  11 +-
 src/templates/ReferenceTemplate.module.scss |  20 ----
 18 files changed, 214 insertions(+), 339 deletions(-)
 delete mode 100644 src/components/Container.js
 delete mode 100644 src/components/Container.module.scss

diff --git a/src/components/BreadcrumbBar.js b/src/components/BreadcrumbBar.js
index 9b4fc01dd..65f43df95 100644
--- a/src/components/BreadcrumbBar.js
+++ b/src/components/BreadcrumbBar.js
@@ -1,26 +1,23 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import styles from './BreadcrumbBar.module.scss';
-import Container from './Container';
 import PropTypes from 'prop-types';
 import { link } from '../types';
 
 const BreadcrumbBar = ({ crumbs, duration }) => (
   <div className={styles.breadcrumbBar}>
-    <Container className={styles.container}>
-      <ul className={styles.crumbs}>
-        {crumbs.map((crumb, index) => (
-          <li key={index}>
-            {crumb.url ? (
-              <Link to={crumb.url}>{crumb.displayName}</Link>
-            ) : (
-              <span>{crumb.displayName}</span>
-            )}
-          </li>
-        ))}
-      </ul>
-      {duration && <div className={styles.duration}>{duration}</div>}
-    </Container>
+    <ul className={styles.crumbs}>
+      {crumbs.map((crumb, index) => (
+        <li key={index}>
+          {crumb.url ? (
+            <Link to={crumb.url}>{crumb.displayName}</Link>
+          ) : (
+            <span>{crumb.displayName}</span>
+          )}
+        </li>
+      ))}
+    </ul>
+    {duration && <div className={styles.duration}>{duration}</div>}
   </div>
 );
 
diff --git a/src/components/Container.js b/src/components/Container.js
deleted file mode 100644
index aee2b53d6..000000000
--- a/src/components/Container.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './Container.module.scss';
-
-const Container = ({ children, className }) => (
-  <div className={cx(styles.container, className)}>{children}</div>
-);
-
-Container.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-};
-
-export default Container;
diff --git a/src/components/Container.module.scss b/src/components/Container.module.scss
deleted file mode 100644
index eb639745f..000000000
--- a/src/components/Container.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.container {
-  max-width: 1200px;
-  margin: auto;
-  box-sizing: border-box;
-  padding: 0 1rem;
-}
diff --git a/src/components/Footer.js b/src/components/Footer.js
index 05d6d4f6e..9b13b6003 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -1,18 +1,15 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import Container from './Container';
 import styles from './Footer.module.scss';
 
 const Footer = () => (
   <footer className={styles.footer}>
-    <Container className={styles.container}>
-      <div className={styles.leftColumn}>
-        <Link to="/" className={`${styles.logo} logo`} />
-        <div className={styles.copyright}>
-          Copyright &copy; 2020 New Relic Inc.
-        </div>
+    <div className={styles.leftColumn}>
+      <Link to="/" className={`${styles.logo} logo`} />
+      <div className={styles.copyright}>
+        Copyright &copy; 2020 New Relic Inc.
       </div>
-    </Container>
+    </div>
   </footer>
 );
 
diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
index 1267dd23c..ba2147c2c 100644
--- a/src/components/Footer.module.scss
+++ b/src/components/Footer.module.scss
@@ -7,16 +7,6 @@
   margin-top: 10rem;
 }
 
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  @media (max-width: 760px) {
-    justify-content: center;
-  }
-}
-
 .leftColumn {
   display: flex;
   align-items: center;
diff --git a/src/components/GuideListing/GuideListing.js b/src/components/GuideListing/GuideListing.js
index ccc4e7465..e307facbc 100644
--- a/src/components/GuideListing/GuideListing.js
+++ b/src/components/GuideListing/GuideListing.js
@@ -1,4 +1,3 @@
-import Container from '../Container';
 import Heading from './Heading';
 import Description from './Description';
 import List from './List';
@@ -7,9 +6,7 @@ import React from 'react';
 import styles from './GuideListing.module.scss';
 
 const GuideListing = ({ children }) => (
-  <div className={styles.guideListing}>
-    <Container className={styles.container}>{children}</Container>
-  </div>
+  <div className={styles.guideListing}>{children}</div>
 );
 
 GuideListing.Heading = Heading;
diff --git a/src/components/Header.js b/src/components/Header.js
index 7b3226de5..fb579a2ca 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'gatsby';
 import cx from 'classnames';
-import Container from './Container';
 import ExternalLink from './ExternalLink';
 import HamburgerMenu from './HamburgerMenu';
 import styles from './Header.module.scss';
@@ -11,56 +10,38 @@ const Header = () => {
 
   return (
     <header className={cx(styles.main, { [styles.isOpen]: isOpen })}>
-      <Container className={styles.container}>
-        <nav role="navigation" aria-label="New Relic" className={styles.navNr}>
-          <h3 className={styles.hideOnDesktop}>Sites</h3>
-          <ul>
-            <li className={styles.hideOnMobile}>
-              <ExternalLink
-                className={cx(styles.logo, styles.logoNr)}
-                href="//newrelic.com"
-              />
-            </li>
-            <li>
-              <Link to="/" className={styles.isActive}>
-                Developers
-              </Link>
-            </li>
-            <li>
-              <ExternalLink href="//opensource.newrelic.com">
-                Open Source
-              </ExternalLink>
-            </li>
-            <li>
-              <ExternalLink href="//docs.newrelic.com">
-                Documentation
-              </ExternalLink>
-            </li>
-          </ul>
-        </nav>
+      <nav role="navigation" aria-label="New Relic" className={styles.navNr}>
+        <h3 className={styles.hideOnDesktop}>Sites</h3>
+        <ul>
+          <li className={styles.hideOnMobile}>
+            <ExternalLink
+              className={cx(styles.logo, styles.logoNr)}
+              href="//newrelic.com"
+            />
+          </li>
+          <li>
+            <Link to="/" className={styles.isActive}>
+              Developers
+            </Link>
+          </li>
+          <li>
+            <ExternalLink href="//opensource.newrelic.com">
+              Open Source
+            </ExternalLink>
+          </li>
+          <li>
+            <ExternalLink href="//docs.newrelic.com">
+              Documentation
+            </ExternalLink>
+          </li>
+        </ul>
+      </nav>
 
-        <HamburgerMenu
-          className={styles.hamburgerMenu}
-          toggle={() => setIsOpen(!isOpen)}
-          isOpen={isOpen}
-        />
-
-        <nav className={styles.navTools}>
-          <h3 className={styles.hideOnDesktop}>Tools</h3>
-          <ul>
-            <li>
-              <ExternalLink
-                className={cx(styles.logo, styles.logoGithub)}
-                href="//github.com/newrelic"
-              >
-                <span className={styles.hideOnDesktop}>
-                  Contribute on GitHub
-                </span>
-              </ExternalLink>
-            </li>
-          </ul>
-        </nav>
-      </Container>
+      <HamburgerMenu
+        className={styles.hamburgerMenu}
+        toggle={() => setIsOpen(!isOpen)}
+        isOpen={isOpen}
+      />
     </header>
   );
 };
diff --git a/src/components/Jumbotron.js b/src/components/Jumbotron.js
index 74aa4da0c..bc133277a 100644
--- a/src/components/Jumbotron.js
+++ b/src/components/Jumbotron.js
@@ -1,42 +1,39 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import Container from './Container';
 import CallToAction from './CallToAction';
 import styles from './Jumbotron.module.scss';
 
 const Jumbotron = () => (
-  <Container>
-    <div className={styles.jumbotron}>
-      <h1 className={styles.h1}>Create a free account to get started</h1>
-      <div className={styles.callToActionContainer}>
-        <CallToAction step="1" text="Create your free account">
-          <form>
-            <input placeholder="me@observability.com" />
-            <button className={styles.signUpButton} type="submit">
-              Sign up
-            </button>
-          </form>
-          <Link to="/">Sign in to New Relic One</Link>
-        </CallToAction>
-        <CallToAction step="2" text="Get your API key">
-          <select id="api-keys" name="api-keys">
-            <option value="" disabled selected hidden>
-              Select or create a key...
-            </option>
-            <option value="key">key</option>
-            <option value="otherkey">otherkey</option>
-          </select>
-          <Link to="/">Create a new API key</Link>
-        </CallToAction>
-        <CallToAction step="3" text="Install the newrelic CLI">
-          <button className={styles.downloadButton} type="button">
-            Download for macOS
+  <div className={styles.jumbotron}>
+    <h1 className={styles.h1}>Create a free account to get started</h1>
+    <div className={styles.callToActionContainer}>
+      <CallToAction step="1" text="Create your free account">
+        <form>
+          <input placeholder="me@observability.com" />
+          <button className={styles.signUpButton} type="submit">
+            Sign up
           </button>
-          <Link to="/">Download for other platforms</Link>
-        </CallToAction>
-      </div>
+        </form>
+        <Link to="/">Sign in to New Relic One</Link>
+      </CallToAction>
+      <CallToAction step="2" text="Get your API key">
+        <select id="api-keys" name="api-keys">
+          <option value="" disabled selected hidden>
+            Select or create a key...
+          </option>
+          <option value="key">key</option>
+          <option value="otherkey">otherkey</option>
+        </select>
+        <Link to="/">Create a new API key</Link>
+      </CallToAction>
+      <CallToAction step="3" text="Install the newrelic CLI">
+        <button className={styles.downloadButton} type="button">
+          Download for macOS
+        </button>
+        <Link to="/">Download for other platforms</Link>
+      </CallToAction>
     </div>
-  </Container>
+  </div>
 );
 
 export default Jumbotron;
diff --git a/src/components/Layout.js b/src/components/Layout.js
index ccfa5f6c2..0d8d861b2 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -8,14 +8,15 @@ import styles from './Layout.module.scss';
 import pages from '../data/sidenav.json';
 import './styles.scss';
 
-
 const Layout = ({ children }) => (
-  <div className={styles.layout}>
+  <>
     <Header />
-    <Sidebar pages={pages} />
-    <main>{children}</main>
+    <div className={styles.layout}>
+      <Sidebar pages={pages} />
+      <main>{children}</main>
+    </div>
     <Footer pages={pages} />
-  </div>
+  </>
 );
 
 Layout.propTypes = {
diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
index 069ad3be3..6890306c2 100644
--- a/src/components/Layout.module.scss
+++ b/src/components/Layout.module.scss
@@ -1,19 +1,7 @@
 .layout {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 1fr 3fr;
-
-  > header {
-    grid-column-start: 1;
-    grid-column-end: 3;
-    grid-row-start: 1;
-    grid-row-end: 2;
-  }
-
-  > footer {
-    grid-column-start: 1;
-    grid-column-end: 3;
-    grid-row-start: 3;
-    grid-row-end: 4;
-  }
+  grid-template-columns: auto 1fr;
+  max-width: 1200px;
+  margin: 0 auto;
 }
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
index 77b938a70..6a7f507c0 100644
--- a/src/components/Sidebar.js
+++ b/src/components/Sidebar.js
@@ -23,7 +23,7 @@ const renderNav = (page, index) => (
 const Sidebar = ({ className, pages, isOpen, toggle }) => (
   <aside className={cx(styles.sidebar, className, { [styles.isOpen]: isOpen })}>
     <h1 className={styles.title}>
-      <Link to="/" className={cx(styles.logo, styles.titleLogo)} />
+      <Link to="/" className={styles.logo} />
     </h1>
     <div className={styles.top}>
       <h3>Pages</h3>
diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
index 2e2386876..39bdc4fdf 100644
--- a/src/components/Sidebar.module.scss
+++ b/src/components/Sidebar.module.scss
@@ -64,9 +64,6 @@
   padding: 0;
   background-size: contain;
   background-repeat: no-repeat;
-}
-
-.titleLogo {
   width: 247px;
   height: 64px;
   margin-right: 1rem;
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 4b6645597..554ff7533 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -78,6 +78,10 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   font-size: 16px;
diff --git a/src/pages/index.js b/src/pages/index.js
index dff791f09..d7876c421 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -3,7 +3,6 @@ import React from 'react';
 import Layout from '../components/Layout';
 import SEO from '../components/Seo';
 import Jumbotron from '../components/Jumbotron';
-import Container from '../components/Container';
 import Section from '../components/Section';
 import GuideListing from '../components/GuideListing/GuideListing';
 import GuideTile from '../components/GuideTile';
@@ -35,45 +34,42 @@ const guides = [
 const IndexPage = () => (
   <Layout>
     <SEO />
-    <Container>
-      <h1 className={styles.h1}>
-        New Relic is a platform for your observability data
-      </h1>
-      <div className={styles.intro}>
-        <div className={styles.introText}>
-          <p>
-            <strong>Instrument</strong> your applications and{' '}
-            <strong>collect</strong> data about their performance.
-          </p>
+    <h1 className={styles.h1}>
+      New Relic is a platform for your observability data
+    </h1>
+    <div className={styles.intro}>
+      <div className={styles.introText}>
+        <p>
+          <strong>Instrument</strong> your applications and{' '}
+          <strong>collect</strong> data about their performance.
+        </p>
 
-          <p>
-            <strong>Query</strong> and <strong>explore</strong> the data on
-            demand with APIs.
-          </p>
+        <p>
+          <strong>Query</strong> and <strong>explore</strong> the data on demand
+          with APIs.
+        </p>
 
-          <p>
-            <strong>Create</strong>, <strong>remix</strong>, and{' '}
-            <strong>deploy</strong> new apps on top of this data.
-          </p>
+        <p>
+          <strong>Create</strong>, <strong>remix</strong>, and{' '}
+          <strong>deploy</strong> new apps on top of this data.
+        </p>
 
-          <p>
-            <strong>Share</strong> those apps with your company and the world.
-          </p>
+        <p>
+          <strong>Share</strong> those apps with your company and the world.
+        </p>
 
-          <p>
-            <strong>Automate</strong> the entire process with robust DevOps
-            tools.
-          </p>
-          <div className={styles.introButtonContainer}>
-            <button type="button">Create a free account</button>
-            <button type="button" className="secondary">
-              Solve a business problem
-            </button>
-          </div>
+        <p>
+          <strong>Automate</strong> the entire process with robust DevOps tools.
+        </p>
+        <div className={styles.introButtonContainer}>
+          <button type="button">Create a free account</button>
+          <button type="button" className="secondary">
+            Solve a business problem
+          </button>
         </div>
-        <div className={styles.introVideo} />
       </div>
-    </Container>
+      <div className={styles.introVideo} />
+    </div>
     <Section backgroundBanner className={styles.backgroundBanner}>
       <Jumbotron />
     </Section>
diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
index 04646bd8b..f20e74fb4 100644
--- a/src/templates/ApiReferenceTemplate.js
+++ b/src/templates/ApiReferenceTemplate.js
@@ -4,7 +4,6 @@ import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
-import Container from '../components/Container';
 import Layout from '../components/Layout';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
@@ -15,7 +14,6 @@ import templateStyles from './ReferenceTemplate.module.scss';
 import useApiDoc from '../hooks/useApiDoc';
 
 const ApiReferenceTemplate = ({ data }) => {
-  // const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, api } = frontmatter;
@@ -30,55 +28,45 @@ const ApiReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <Container className={templateStyles.container}>
-        {/* <Sidebar
-          className={templateStyles.sidebar}
-          pages={pages}
-          isOpen={isOpen}
-          toggle={() => setIsOpen(!isOpen)}
-        /> */}
-        <main className={templateStyles.content}>
-          <h1>{api}</h1>
+      <h1>{api}</h1>
 
-          <section
-            className={cx(templateStyles.section, templateStyles.description)}
-          >
-            <ReactMarkdown source={apiDescription} />
-          </section>
+      <section
+        className={cx(templateStyles.section, templateStyles.description)}
+      >
+        <ReactMarkdown source={apiDescription} />
+      </section>
 
-          <section className={templateStyles.section}>
-            <h2>Usage</h2>
-            <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
-          </section>
+      <section className={templateStyles.section}>
+        <h2>Usage</h2>
+        <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+      </section>
 
-          {methods.length > 0 && (
-            <section className={templateStyles.section}>
-              <h2>API methods</h2>
-              {methods.map((method, i) => (
-                <MethodReference key={i} method={method} />
-              ))}
-            </section>
-          )}
+      {methods.length > 0 && (
+        <section className={templateStyles.section}>
+          <h2>API methods</h2>
+          {methods.map((method, i) => (
+            <MethodReference key={i} method={method} />
+          ))}
+        </section>
+      )}
 
-          {typeDefs.length > 0 && (
-            <section className={templateStyles.section}>
-              <h2>Type definitions</h2>
-              {typeDefs.map((typeDef, i) => (
-                <TypeDefReference key={i} typeDef={typeDef} />
-              ))}
-            </section>
-          )}
+      {typeDefs.length > 0 && (
+        <section className={templateStyles.section}>
+          <h2>Type definitions</h2>
+          {typeDefs.map((typeDef, i) => (
+            <TypeDefReference key={i} typeDef={typeDef} />
+          ))}
+        </section>
+      )}
 
-          {constants.length > 0 && (
-            <section className={templateStyles.section}>
-              <h2>Constants</h2>
-              {constants.map((constant, i) => (
-                <ConstantReference key={i} constant={constant} />
-              ))}
-            </section>
-          )}
-        </main>
-      </Container>
+      {constants.length > 0 && (
+        <section className={templateStyles.section}>
+          <h2>Constants</h2>
+          {constants.map((constant, i) => (
+            <ConstantReference key={i} constant={constant} />
+          ))}
+        </section>
+      )}
     </Layout>
   );
 };
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index 894b4e9e7..a5ef245f4 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -4,14 +4,11 @@ import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
-import Container from '../components/Container';
 import ReferenceExample from '../components/ReferenceExample';
 import Layout from '../components/Layout';
 import MethodReference from '../components/MethodReference';
-// import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
-// import pages from '../data/sidenav.json';
 import styles from './ComponentReferenceTemplate.module.scss';
 import templateStyles from './ReferenceTemplate.module.scss';
 import useComponentDoc from '../hooks/useComponentDoc';
@@ -41,78 +38,67 @@ const ComponentReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <Container className={templateStyles.container}>
-        {/* <Sidebar
-          className={templateStyles.sidebar}
-          pages={pages}
-          isOpen={isOpen}
-          toggle={() => setIsOpen(!isOpen)}
-        /> */}
-        <main className={templateStyles.content}>
-          <h1>{component}</h1>
+      <h1>{component}</h1>
+      <section
+        className={cx(
+          templateStyles.section,
+          templateStyles.description,
+          'intro-text'
+        )}
+      >
+        <ReactMarkdown source={componentDescription} />
+      </section>
 
-          <section
-            className={cx(
-              templateStyles.section,
-              templateStyles.description,
-              'intro-text'
-            )}
-          >
-            <ReactMarkdown source={componentDescription} />
-          </section>
+      <section className={templateStyles.section}>
+        <h2>Usage</h2>
+        <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+      </section>
 
-          <section className={templateStyles.section}>
-            <h2>Usage</h2>
-            <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
-          </section>
+      {examples.length > 0 && (
+        <section className={templateStyles.section}>
+          <h2>Examples</h2>
+          <div>
+            {examples.map((example, i) => (
+              <ReferenceExample
+                key={i}
+                useToastManager={component === 'Toast'}
+                className={styles.componentExample}
+                example={example}
+                previewStyle={previewStyles[component]}
+              />
+            ))}
+          </div>
+        </section>
+      )}
 
-          {examples.length > 0 && (
-            <section className={templateStyles.section}>
-              <h2>Examples</h2>
-              <div>
-                {examples.map((example, i) => (
-                  <ReferenceExample
-                    key={i}
-                    useToastManager={component === 'Toast'}
-                    className={styles.componentExample}
-                    example={example}
-                    previewStyle={previewStyles[component]}
-                  />
-                ))}
-              </div>
-            </section>
-          )}
+      {component === 'Icon' && (
+        <section className={templateStyles.section}>
+          <IconGallery />
+        </section>
+      )}
 
-          {component === 'Icon' && (
-            <section className={templateStyles.section}>
-              <IconGallery />
-            </section>
-          )}
+      <section className={templateStyles.section}>
+        <h2>Props</h2>
+        <PropList propTypes={propTypes} />
+      </section>
 
-          <section className={templateStyles.section}>
-            <h2>Props</h2>
-            <PropList propTypes={propTypes} />
-          </section>
+      {methods.length > 0 && (
+        <section className={templateStyles.section}>
+          <h2>Methods</h2>
+          {methods.map((method, i) => (
+            <MethodReference key={i} method={method} />
+          ))}
+        </section>
+      )}
 
-          {methods.length > 0 && (
-            <section className={templateStyles.section}>
-              <h2>Methods</h2>
-              {methods.map((method, i) => (
-                <MethodReference key={i} method={method} />
-              ))}
-            </section>
-          )}
-
-          {typeDefs.length > 0 && (
-            <section className={templateStyles.section}>
-              <h2>Type definitions</h2>
-              {typeDefs.map((typeDef, i) => (
-                <TypeDefReference key={i} typeDef={typeDef} />
-              ))}
-            </section>
-          )}
-        </main>
-      </Container>
+      {typeDefs.length > 0 && (
+        <section className={templateStyles.section}>
+          <h2>Type definitions</h2>
+          {typeDefs.map((typeDef, i) => (
+            <TypeDefReference key={i} typeDef={typeDef} />
+          ))}
+        </section>
+      )}
     </Layout>
   );
 };
diff --git a/src/templates/GuideTemplate.js b/src/templates/GuideTemplate.js
index b51cc9eb1..be15c186f 100644
--- a/src/templates/GuideTemplate.js
+++ b/src/templates/GuideTemplate.js
@@ -6,7 +6,6 @@ import { MDXProvider } from '@mdx-js/react';
 
 import Layout from '../components/Layout';
 import BreadcrumbBar from '../components/BreadcrumbBar';
-import Container from '../components/Container';
 import Video from '../components/Video';
 import Step from '../components/Step';
 import Steps from '../components/Steps';
@@ -36,12 +35,10 @@ const GuideTemplate = ({ data }) => {
     <Layout>
       <SEO title={title} description={description} />
       <BreadcrumbBar crumbs={crumbs} duration={frontmatter.duration} />
-      <Container>
-        <h1>{title}</h1>
-        <MDXProvider components={components}>
-          <MDXRenderer>{body}</MDXRenderer>
-        </MDXProvider>
-      </Container>
+      <h1>{title}</h1>
+      <MDXProvider components={components}>
+        <MDXRenderer>{body}</MDXRenderer>
+      </MDXProvider>
     </Layout>
   );
 };
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
index 0135ade15..c679a6a06 100644
--- a/src/templates/ReferenceTemplate.module.scss
+++ b/src/templates/ReferenceTemplate.module.scss
@@ -1,23 +1,3 @@
-.container {
-  display: grid;
-  grid-template-columns: auto 3fr;
-  grid-column-gap: 2rem;
-  grid-template-areas: 'sidebar main';
-
-  @media (max-width: 760px) {
-    grid-template-columns: none;
-    grid-template-areas: 'sidebar' 'main';
-  }
-}
-
-.content {
-  grid-area: main;
-}
-
-.sidebar {
-  grid-area: sidebar;
-}
-
 .description {
   margin-top: 0.5rem;
   padding-top: 0.5rem;