intent de canviar el headertab per un flex tal com sugeria el chatgpt pero al posar el maleit max-height deixa d'alinear-se correctament a l'esquerra, tremenda F

estils.css

@@ -137,7 +137,9 @@ footer{
 } */
 
 .headerbar{
-    height: 100px; /*amb això la imatge em queda dins del div, segurament no és lo millor... */
+    /*amb això la imatge em queda dins del div, segurament no és lo millor... */
+    /* height: 100px; */
+    height: 5vh;
     padding: 16px 16px;
 }
 
@@ -157,15 +159,46 @@ footer{
     /* z-index: -1;
     color: #f5f0ed; */
 
-    width: 15%;
+    height: 100%;
     float: left;
 }
 
+.container {
+    display: flex;
+    flex-wrap: wrap;
+    height: 10vh; /* Set the height to 20% of the viewport height */
+    overflow: hidden; /* Hide overflowing content */ 
+  }
+  
+  .image-container {
+    flex: 1; /* Image takes as much space as available */
+    /* max-width: 50%; */
+    /* max-height: 100%; */
+  }
+  
+  .image-container img {
+    width: 100%; /* Make image responsive, filling the container */
+    height: auto;
+    padding: 16px 16px;
+    max-width: 100%; /* Constrain image within the container */
+    /* max-height: 50%; */
+max-height: 100px;
+    /* margin-right: auto; */
+  }
+  
+  .text-container {
+    flex: 1; /* Text takes as much space as available */
+    padding: 0 10px; /* Optional padding */
+    box-sizing: border-box; /* Include padding in the width */
+    max-width: 50%; /* Limit maximum width to 50% of the container */
+  }
+  
+
 .imatge_centrada{
     display: block;
     margin-left: auto;
     margin-right: auto;
-    width: 400px;
+    width: 50%;
     /* text-align: center; */
 }
 

index.html

@@ -15,6 +15,14 @@
     <header>
         <!-- <h1>bon dia</h1> -->
     </header>
+    <div class="container">
+        <div class="image-container">
+          <img src="header_kinnikustudios_logo_black.svg" alt="Kinniku Studios Logo">
+        </div>
+        <div class="text-container">
+            <h3 id="languageShortname">EN</h3>
+        </div>
+      </div>      
     <div class="headerbar">
         <img class="logo" src="header_kinnikustudios_logo_black.svg" alt="Kinniku Studios Logo">
         <h3 id="languageShortname">EN</h3>