WIP on answer ky form

src/components/AnswerKeyForm/index.js

@@ -0,0 +1,14 @@
+import React, {Component} from 'react';
+import './index.css';
+
+class AnswerKeyForm extends Component {
+  render() {
+    return (
+      <div className="answerkeyform">
+        <h1>New Answer Key</h1>
+      </div>
+    );
+  }
+}
+
+export default AnswerKeyForm;

src/components/App.js

@@ -1,5 +1,6 @@
 import React, {Component} from 'react';
 import Header from './Header';
+import AnswerKeyForm from './AnswerKeyForm';
 
 class App extends Component {
   render() {
@@ -7,10 +8,7 @@ class App extends Component {
       <div className="App">
         <Header />
         <div className="container">
-          <div className="row">
-            <div className="three columns">First column</div>
-            <div className="nine columns">Next column</div>
-          </div>
+          <AnswerKeyForm />
         </div>
       </div>
     );

src/components/Header/index.css

@@ -1,3 +1,11 @@
 .header hr {
   margin-top: 0;
 }
+
+.header__nav {
+  padding: 2rem 0;
+}
+
+.header__sitename {
+  padding: 0 1rem;
+}

src/components/Header/index.js

@@ -5,10 +5,12 @@ class Header extends Component {
   render() {
     return (
       <div className="header">
-        <nav className="nav container">
+        <nav className="header__nav container">
           <div className="row">
-            <div className="two columns">ECS Grader</div>
-            <div className="ten columns" />
+            <div className="three columns">
+              <div className="header__sitename">ECS Grader</div>
+            </div>
+            <div className="nine columns" />
           </div>
         </nav>
         <hr />