diff --git a/src/components/Header.svelte b/src/components/Header.svelte
index 98bfac4..1ee615f 100644
--- a/src/components/Header.svelte
+++ b/src/components/Header.svelte
@@ -47,7 +47,7 @@
       <li><a on:click={onClick} href={"javascript:;"}>{name}</a></li>
     {/each}
   </ul>
-  {SharkGame.title}
+  <span>{SharkGame.title}</span>
   <ul id="other-header-buttons">
     {#each Object.entries(otherHeaderButtons) as [name, onClick]}
       <li>
@@ -62,6 +62,10 @@
 
 <style lang="scss">
   header {
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+
     width: 100%;
     background-color: var(--color-dark);
     text-shadow: 2px 2px 3px var(--color-darker);
@@ -109,6 +113,12 @@
       &#other-header-buttons {
         float: right;
       }
+
+      &:is(#main-header-buttons, #other-header-buttons)::after {
+        content: "";
+        clear: both;
+        display: table;
+      }
     }
   }
 </style>