a simple footer

site/assets/scss/elements/_footer.scss

@@ -0,0 +1,28 @@
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0;
+  background-color: $dark-blue;
+  padding: $gutter;
+  color: $light-grey;
+
+  nav {
+    flex: 0 1 auto;
+    margin: 5px 0;
+  }
+}
+
+@media screen and (min-width: 650px) {
+  footer {
+    flex-direction: row;
+  }
+}
+
+@media screen and (min-width: 900px) {
+  footer {
+    padding: ($gutter * 2) calc((100% - 850px) / 2);
+    width: 850px;
+  }
+}

site/assets/scss/elements/_layout.scss

@@ -15,23 +15,15 @@ section {
   &:nth-of-type(even) {
     background-color: $light-grey;
   }
-}
 
-footer {
-  margin: 0;
-  padding: 0 $gutter;
+  &:last-of-type {
+    margin-bottom: 0;
+  }
 }
 
 @media screen and (min-width: 900px) {
-
   section {
     padding: ($gutter * 2) calc((100% - 850px) / 2);
     width: 850px;
   }
-
-  footer {
-    padding: 0 calc((100% - 850px) / 2);
-    width: 850px;
-  }
-
 }

site/assets/scss/elements/_nav.scss

@@ -1,6 +1,7 @@
 nav {
   ul {
     @include slim-ul;
+    margin: 0;
 
     li {
       display: inline-block;