styles

src/App.css

@@ -39,6 +39,10 @@
   line-height: 4;
 }
 
+#name-wrap {
+  text-align: left;
+}
+
 .attendee-name {
   font-weight: 700;
 }

src/form.js

@@ -17,16 +17,14 @@ const styles = theme => ({
     marginLeft: theme.spacing.unit,
     marginRight: theme.spacing.unit,
     display: 'inline-block',
-    width: 200,
-  },
-  dense: {
-    marginTop: 19,
+    width: 200
   },
   menu: {
     width: 200,
   },
   fullWidth: {
-    width: '100%'
+    width: '100%',
+    textAlign: 'left'
   },
   blackText: {
     color: 'black'
@@ -144,7 +142,7 @@ class TextFields extends React.Component {
     return (
       <div>
       <form className={classes.container} noValidate autoComplete="off">
-      <div className='name-wrap' style={styles.fullWidth}>
+      <div className='name-wrap' id='name-wrap' style={styles.fullWidth}>
           <InputLabel id='name-label' htmlFor="attendee-name">Name</InputLabel>
 
           <TextField
@@ -164,7 +162,7 @@ class TextFields extends React.Component {
             name="Significant Other"
             type="checkbox"
             className={classes.textField}
-            style={{verticalAlign: 'top', marginLeft: '-10em'}}
+            style={{verticalAlign: 'top'}}
             checked={this.state.significantOther}
             onChange={this.handleSignificantOther} />
       </div>