Fixed nav options overlapping on medium sized screens

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%;
   }

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;
   }

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;
   }

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>