use flexbox on header

1 files changed, 6 insertions, 5 deletions

diff --git a/style.css b/style.css
index d9fe494..f539e65 100644
--- a/style.css
+++ b/style.css
@@ -14,17 +14,18 @@ body {
 main {
     margin: 0 1rem;
 }
-header {
+body > header {
+    display: flex;
+    justify-content: space-between;
     padding: 0.5rem 1rem;
     color: ButtonText;
     background-color: ButtonFace;
+    gap: 0.5rem 1rem;
+    flex-wrap: wrap;
 }
 header nav {
     display: inline-block;
 }
-header span {
-    margin-right: 10px;
-}
 section header {
     font-style: italic;
 }
@@ -37,7 +38,7 @@ nav ul {
 nav ul li {
     display: inline-block;
     border-right: 1px solid ButtonText;
-    padding: 2px 10px;
+    padding: 0 10px;
     margin: 0;
 }
 nav ul li a,