Set up Flex containers and fit header with Flex

Added .section class to all 4 sections. Added
 #links to header links span. Made new area in
 styles.css for aranging items.

1 files changed, 34 insertions, 0 deletions

diff --git a/styles.css b/styles.css
index 8a2db50..521a7d8 100644
--- a/styles.css
+++ b/styles.css
@@ -4,6 +4,40 @@
     margin: 0px;
 }
 
+/* Arrangement of items */
+.section {
+    display: flex;
+    justify-content: center;
+}
+#top { /* Container for Top section */ 
+    flex-direction: column;
+    align-items: center;
+}
+#header { /* Container for Logo and Links */
+    width: 75%;
+    margin-top: 2%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
+#logo {
+    flex: auto;
+    min-width: 60px;
+    min-height: 60px;
+}
+#links { /* Container for the header links */
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+}
+#links a {
+    padding: 4px 10px;
+    flex: auto;
+    min-width: 60px;
+    min-height: 60px;
+}
+
+/* Style of items */
 #top {
     background-color: #1F2937;
     color: #F9FAF8;