Move language button into header

Hey guys, have you heard of this *grid* thing?  It's actually pretty
cool!

2 files changed, 12 insertions, 8 deletions

diff --git a/artistes.html b/artistes.html
index 14f4bf0..3e4e3c9 100644
--- a/artistes.html
+++ b/artistes.html
@@ -19,11 +19,12 @@
         <li>médias</li>
       </ol>
     </nav>
-  </header>
 
-  <div class="lang">
-    EN
-  </div>
+    <div class="lang">
+      EN
+    </div>
+
+  </header>
 
   <main>
     <div id="photos">
diff --git a/commun.css b/commun.css
index 85da7c8..a405e5d 100644
--- a/commun.css
+++ b/commun.css
@@ -7,14 +7,17 @@ body {
 }
 
 header.banner {
-    grid-column: 1;
-    display: flex;
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: 3fr 8fr 1fr;
     align-items: center;
 }
 
 header.banner .brand {
+    grid-column: 1;
     display: flex;
     align-items: center;
+    justify-self: center;
 }
 
 header.banner .brand img {
@@ -41,7 +44,7 @@ header.banner .brand:hover h1 {
 }
 
 nav {
-    flex: 1;
+    grid-column: 2;
 }
 
 nav ol {
@@ -58,7 +61,7 @@ nav ol li {
 }
 
 .lang {
-    grid-column: 2;
+    grid-column: 3;
     background-color: black;
     border-radius: 50% 50% 50% 0;
     color: white;