putting homepage inside a container class

client/src/styles/styles.scss

@@ -370,30 +370,17 @@ header.menu{
   }
 }
 
-.homePage{
-  padding-top: 70px;
-  padding-bottom: 70px;
-  margin-right: auto;
-  margin-left: auto;
-  @media screen and (min-width: $break-sm) {
-    width: 750px;
-  }
-  @media screen and (min-width: $break-md) {
-    width: 970px;
-  }
-  @media screen and (min-width: 1200px) {
-    width: 1170px;
-  }
+.homePage.container{
   .title{
     padding: 0 0 10px 0;
-    font-size: 45px;
+    @include fluid-type($break-xs, $break-lg, 24px, 45px);
     line-height: 55px;
     padding: 40px 0 0.5em 0;
     font-weight: 100;
   }
   .subtitle{
     padding-bottom: 5px;
-    font-size: 20px;
+    @include fluid-type($break-xs, $break-lg, 18px, 20px);
     line-height: 19px;
     font-weight: 100;
     text-transform: uppercase;

client/src/views/home/index.js

@@ -12,7 +12,7 @@ class Home extends Component {
           text='Enabling the evolutionary race towards the emergence of superalgos'
           backgroundUrl='https://aacorporatesitedevelop.azurewebsites.net/img/photos/superalgos-platform.jpg'
         />
-        <div className='homePage'>
+        <div className='homePage container'>
           <Typography variant='h1' align='center' className='title'>Welcome to the Advanced Algos Platform!</Typography>
           <Typography variant='h2' align='center' className='subtitle'>CO-CREATE >> COMPETE >> EVOLVE</Typography>
           <div className='column'>