ui(404): improve 404 page styling

src/components/404LinkCorrection/index.tsx

@@ -95,11 +95,14 @@ export const PossibleCorrections: FC<IPossibleCorrections> = ({
   })
 
   // helpful message if no matches found
-  const found = displayArray.length === 0 ? "Oops, nothing similar found." : ""
+  const found = displayArray.length === 0 ? <SC.StyledFound>Oops, nothing similar found.</SC.StyledFound> : ""
 
   return (
     <Fragment>
-      <h3>Based off of "{search}" you may have meant:</h3>
+      <SC.StyledDiv>
+          <h3>Based off of "{search}" you may have meant:</h3>
+          {found}
+      </SC.StyledDiv>
       <ul>
         {displayArray.map((value, index) => {
           return (
@@ -111,7 +114,6 @@ export const PossibleCorrections: FC<IPossibleCorrections> = ({
           )
         })}
       </ul>
-      {found}
     </Fragment>
   )
 }

src/components/404LinkCorrection/styles.tsx

@@ -14,3 +14,13 @@ export const StyledLink = styled(Link)`
     transition: none;
   }
 `
+export const StyledFound = styled.div`
+  margin: 13px 10px 10px;
+  padding: 10px;
+`
+export const StyledDiv = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`