Finish Flex-Header-2

wilkinsonbrian · wilkinsonbrian · commit d9a03d3346c7 · 2022-08-29T15:50:09.000-04:00
diff --git a/flex/03-flex-header-2/index.html b/flex/03-flex-header-2/index.html
@@ -9,18 +9,21 @@
   </head>
   <body>
     <div class="header">
-      <div class="logo">
-        LOGO
+      <div class="header-left">
+        <div class="logo">
+          LOGO
+        </div>
+        <ul class="links">
+          <li><a href="google.com">link-one</a></li>
+          <li><a href="google.com">link-two</a></li>
+          <li><a href="google.com">link-three</a></li>
+        </ul>
       </div>
-      <ul class="links">
-        <li><a href="google.com">link-one</a></li>
-        <li><a href="google.com">link-two</a></li>
-        <li><a href="google.com">link-three</a></li>
-      </ul>
-      <button class="notifications">
-        1 new notification
-      </button>
-      <div class="profile-image"></div>
+      <div class="header-right">
+        <button class="notifications">
+          1 new notification
+        </button>
+        <div class="profile-image"></div>
     </div>
   </body>
 </html>
diff --git a/flex/03-flex-header-2/style.css b/flex/03-flex-header-2/style.css
@@ -12,8 +12,18 @@ body {
   background: white;
   border-bottom: 1px solid #ddd;
   box-shadow: 0 0 8px rgba(0,0,0,.1);
+  display: flex;
+  justify-content: space-between;
 }
 
+
+.header-right, .header-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+
 .profile-image {
   background: rebeccapurple;
   box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
@@ -27,6 +37,7 @@ body {
   font-size: 32px;
   font-weight: 900;
   font-style: italic;
+  margin: 0px;
 }
 
 button {
@@ -45,4 +56,8 @@ a {
 
 ul {
   list-style-type: none;
+  display: flex;
+  margin: 0px;
+  padding: 0px;
+  gap: 16px;
 }
