Implementing Container Div

client/src/components/Browse.js

@@ -13,7 +13,9 @@ class Browse extends Component {
           text='Everyone involved in Advanced Algos is here.'
           backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
         />
-        <UserList />
+        <div className='container'>
+          <UserList />
+        </div>
       </React.Fragment>
     )
   }

client/src/components/ProfileSheet.js

@@ -27,10 +27,9 @@ import AALogo from '../img/aa-logo.png'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   },
@@ -511,7 +510,9 @@ class ProfileSheet extends Component {
   render () {
     return (
       <React.Fragment>
-        {this.addForm()}
+        <div className='container'>
+          {this.addForm()}
+        </div>
       </React.Fragment>
     )
   }

client/src/components/Search.js

@@ -10,10 +10,9 @@ import { withStyles } from '@material-ui/core/styles'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   }
@@ -31,9 +30,11 @@ class Search extends Component {
           text='Find anyone involved in Advanced Algos here.'
           backgroundUrl='https://advancedalgos.net/img/photos/users.jpg'
         />
-        <Paper className={classes.root}>
-          <UserSearch />
-        </Paper>
+        <div className='container'>
+          <Paper className={classes.root}>
+            <UserSearch />
+          </Paper>
+        </div>
       </React.Fragment>
     )
   }

client/src/components/UserList.js

@@ -34,9 +34,9 @@ import UserDefaultPicture from '../img/user-default-pic.jpg'
 
 const styles = theme => ({
   root: {
-    flexGrow: 1,
-    padding: 60,
-    margin: 2,
+    paddingTop:30,
+    paddingBottom:30,
+    flexGrow: 1 
   },
   card: {
     maxWidth: 345,

client/src/components/YourDescendents.js

@@ -13,10 +13,9 @@ import DescendentsTree from './DescendentsTree'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   },
@@ -84,7 +83,9 @@ class YourDescendents extends Component {
   render () {
     return (
       <React.Fragment>
-        {this.addForm()}
+        <div className='container'>
+          {this.addForm()}
+        </div>
       </React.Fragment>
     )
   }

client/src/components/YourReferrer.js

@@ -15,10 +15,9 @@ import Typography from '@material-ui/core/Typography'
 
 const styles = theme => ({
   root: {
-    width: '50%',
+    width: '100%',
     flexGrow: 1,
     padding: 10,
-    marginLeft: '25%',
     marginTop: '5%',
     marginBottom: '10%'
   },
@@ -141,7 +140,9 @@ class YourReferrer extends Component {
   render () {
     return (
       <React.Fragment>
-        {this.addForm()}
+        <div className='container'>
+          {this.addForm()}
+        </div>
       </React.Fragment>
     )
   }