diff --git a/src/recommendations/RecommendationsPage.jsx b/src/recommendations/RecommendationsPage.jsx
index 8529854d..baeba6aa 100644
--- a/src/recommendations/RecommendationsPage.jsx
+++ b/src/recommendations/RecommendationsPage.jsx
@@ -91,7 +91,7 @@ const RecommendationsPage = (props) => {
           { siteName: getConfig().SITE_NAME })}
         </title>
       </Helmet>
-      <div className="d-flex flex-column vh-100">
+      <div className="d-flex flex-column vh-100 bg-light-200">
         <div className="mb-2">
           <div className="col-md-12 small-screen-top-stripe medium-screen-top-stripe extra-large-screen-top-stripe" />
           <Hyperlink destination={getConfig().MARKETING_SITE_BASE_URL}>
diff --git a/src/sass/_recommendations_page.scss b/src/sass/_recommendations_page.scss
index f37dbf03..6300b711 100644
--- a/src/sass/_recommendations_page.scss
+++ b/src/sass/_recommendations_page.scss
@@ -1,6 +1,6 @@
 .card-list {
   padding-left: 0.0625rem;
-  padding-bottom: 0.125;
+  padding-bottom: 0.125rem;
   @include media-breakpoint-down(xl) {
     overflow-x: scroll;
     overflow-y: hidden;