Adjust the top navigation bar so that it is centered above and below

client/src/components/app_bar.tsx

@@ -165,7 +165,7 @@ export function WelcomeAppBar({pageNumber, setPageNumber, gameInfo, toggleImpres
   const [navOpen, setNavOpen] = React.useState(false)
 
   return <div className="app-bar">
-    <div>
+    <div className='app-bar-left'>
       <Button inverted="false" title="back to games selection" to="/">
         <FontAwesomeIcon icon={faArrowLeft} />&nbsp;<FontAwesomeIcon icon={faGlobe} />
       </Button>
@@ -237,7 +237,7 @@ export function LevelAppBar({isLoading, levelTitle, toggleImpressum, pageNumber=
       </> :
       <>
         {/* DESKTOP VERSION */}
-        <div>
+        <div className='app-bar-left'>
           <HomeButton isDropdown={false} />
           <span className="app-bar-title">{worldTitle && `World: ${worldTitle}`}</span>
         </div>

client/src/css/app.css

@@ -105,11 +105,17 @@ em {
   position: relative;
   flex-direction: row;
   justify-content: space-between;
+  align-items: center;
   padding: 1.1em;
   filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
   z-index: 2;
 }
 
+.app-bar > .app-bar-left{
+  display: flex;
+  align-items: center;
+}
+
 .app-bar-title, .app-bar-subtitle {
   color: white;
   font-weight: 500;