fix(client): guide layout

client/src/components/layouts/GuideLayout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StaticQuery, graphql } from 'gatsby';
-import { Col, Row } from '@freecodecamp/react-bootstrap';
+import { Grid, Col, Row } from '@freecodecamp/react-bootstrap';
 
 import { NavigationContext } from '../../contexts/GuideNavigationContext';
 import DefaultLayout from './Default';
@@ -61,6 +61,7 @@ const Layout = ({ children }) => (
           }) => (
             <DefaultLayout>
               <Spacer size={2} />
+              <Grid>
                 <Row>
                   <Col
                     md={4}
@@ -85,6 +86,7 @@ const Layout = ({ children }) => (
                     </main>
                   </Col>
                 </Row>
+              </Grid>
             </DefaultLayout>
           )}
         </NavigationContext>

client/src/components/layouts/guide.css

@@ -61,14 +61,14 @@
 }
 
 .breadcrumb > .active {
-  color: #555
+  color: #555;
 }
 
 /* Layout */
 
 .content {
-  overflow-y: auto;
-  height: 92vh;
+  /* 100vh - (navbar height) - (spacer height) */
+  min-height: calc(100vh - 38px - 60px);
 }
 
 .content img {
@@ -93,7 +93,6 @@
   width: 60%;
 }
 
-
 @media (max-width: 400px) {
   .fcc_searchBar .ais-Hits {
     width: 80%;
@@ -116,7 +115,6 @@
   outline: 0;
 }
 
-
 .navContainer {
   display: flex;
   align-items: center;
@@ -172,10 +170,10 @@
 .navbar-toggle {
   border: 1px solid #fff;
   margin-left: 10px;
-  margin-right: 0px;
+  margin-right: 0;
 }
 
-.navbar-toggle .icon-bar{
+.navbar-toggle .icon-bar {
   background-color: #fff;
 }
 
@@ -242,30 +240,21 @@
 
 .navPanelUl {
   list-style: none;
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .panelStyle {
   border: none !important;
-  border-radius: 0px;
+  border-radius: 0;
   box-shadow: none;
   color: #006400;
   padding: 0;
 }
 
 .sideNav {
-  overflow-y: scroll;
-  max-height: 90vh;
   position: relative;
 }
 
-@media (max-width: 992px) {
-  .sideNav {
-    overflow-y: auto;
-    max-height: none;
-  }
-}
-
 .stubbed {
   color: #777;
 }
@@ -283,7 +272,7 @@
 .title {
   background-color: white;
   border: none;
-  border-radius: 0px;
+  border-radius: 0;
   cursor: pointer;
 }
 
@@ -293,13 +282,10 @@
   height: calc(var(--h) - 55px);
 }
 
-@media (max-width: 992px){
-
+@media (max-width: 992px) {
   .content {
-    overflow-y: hidden;
-    height: 100%;
+    min-height: auto;
   }
-
 }
 
 .skip-link {