From 422e0013d64d78cc3afcbe5bfca22c250912f519 Mon Sep 17 00:00:00 2001
From: Giovani <giovani@boldquest.net>
Date: Thu, 18 Apr 2019 17:40:14 -0400
Subject: [PATCH] Fixed nav options overlapping on medium sized screens

---
 src/components/App.css                       | 2 +-
 src/components/introduction/introduction.css | 2 +-
 src/components/navigation/navigation.css     | 2 +-
 src/components/navigation/navigation.js      | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/App.css b/src/components/App.css
index fdb9d21..f5121f7 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -11,7 +11,7 @@ html {
   height: 5rem;
 }
 
-@media (max-width: 575.98px) {  /* sm */
+@media (max-width: 575.98px) {  /* xs */
   .content-width {
     width: 90%;
   }
diff --git a/src/components/introduction/introduction.css b/src/components/introduction/introduction.css
index c112e27..b9e1920 100644
--- a/src/components/introduction/introduction.css
+++ b/src/components/introduction/introduction.css
@@ -6,7 +6,7 @@
   width: 500px;
 }
 
-@media (max-width: 575.98px) {  /* sm */
+@media (max-width: 575.98px) {  /* xs */
   .line-one-type-size {
     font-size: 2rem;
   }
diff --git a/src/components/navigation/navigation.css b/src/components/navigation/navigation.css
index 8f2e840..e06c925 100644
--- a/src/components/navigation/navigation.css
+++ b/src/components/navigation/navigation.css
@@ -19,7 +19,7 @@
   display: none;
 }
 
-@media (max-width: 575.98px) {  /* sm */
+@media (max-width: 767.98px) {  /* sm */
   .desktop-nav {
     display: none;
   }
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
index f57e7b5..585b100 100644
--- a/src/components/navigation/navigation.js
+++ b/src/components/navigation/navigation.js
@@ -37,10 +37,10 @@ class NavigationBar extends Component {
     return (
       <div>
         <div className="container-fluid desktop-nav fixed-top">
-          <div className="row justify-content-end nav-background-color">
+          <div className="row justify-content-center justify-content-xl-end nav-background-color">
             {this.navigationOptions.map((navigationOption, i) => {
               return ( 
-                <a className="col-1 nav-menu-item remove-link-styling" href={navigationOption.href} key={i}>
+                <a className="col-2 col-xl-1 nav-menu-item remove-link-styling" href={navigationOption.href} key={i}>
                   <div className="text-center pt-2 pb-2">
                     <h3>{navigationOption.content}</h3>
                   </div>