Header avec images - Placement des éléments

Salut,
avec des dimensions en pourcentage et des marges sinon.

<header><!--- 100% 0 de marge //-->
<container image1>    <container titre><container image2><container img3>
 30% 2% de marge à droite
----------------------- -TITRE --------2%marge à gauche,  width 30%
----------------------------- image2  ---------------------width18%,  1%marge à droite
 ---------------------------------------- image3 -------------------- width 16%, 1% marge à droite

</header>
                                        

Le plus simple est toujours le mieux
Faut virer tout les autres positionnement et si un soucis passez les containers en display:inline ou inline-block
J'ai donné des valeurs au pif mais tant que ça fait 100% (marge externes et internes comprises) voire un poco moins pour éviter tout débordement(bordure et truc du genre)

ciao

ps: utilisez des dimensions proportionnelles au lieux de valeurs fixes qui ne correspondent à rien sur un écran d'une autre taille et résolution : "%" et "em" par exemple au lieu "px" et "pt"
ps2: même pas besoin de container ) part le header en ne jouant que sur les marges(droite/gauche internes/externes) et simplement regrouper les 2 titres en utilisant que du "inline"

<p><h2>Imparare italiano<h2><br>
<h1 style="padding-left:2em;">Apprendre l'italien<h1>
</p>

Ce n'est pas très simple non plus.
J'ai essayé de placer les éléments comme ça mais il y a des problèmes.

h1 et h2 se mettent en diagonale en bas à droite de la première image, au lieu d'être vers le haut du header.

Une autre piste en utilisant float :

<header class="page-header">
  <img src="http://apprendreitalien.byethost33.com/HeaderTest/vespa.png" class="vespa">
  
 <h1 class="page-title">
   Imparare l'italiano<br>
   <small>-Apprendre l'italien</small>
 </h1>
  
  <img src="http://apprendreitalien.byethost33.com/HeaderTest/tour.webp" class="tour">
  <img src="http://apprendreitalien.byethost33.com/HeaderTest/drapeau.png" class="drapeau">
</header>

@import url('https://fonts.googleapis.com/css2?family=Questrial&family=Raleway:wght@300&display=swap');

body{
  margin: 0;
  padding: 0;
}

.page-header{
  background-color: #77e8ca;
  text-align: center;
}

.page-title {
  display: inline-block;
  padding: 35px 15px;
  font-size: 48px;
  font-family: 'Questrial', sans-serif;
  font-weight: normal;
}

.page-title small {
  font-size: 18px;
  font-family: 'Raleway', sans-serif;
  font-weight: normal;
  text-align: right;
}

.vespa {
  float: left;
  max-height: 250px;
}

.drapeau {
  float: right;
  max-height: 220px;
  margin-right: 20px;
}

.tour {
  float: right;
  max-height: 220px;
}

Merci pour avoir fait ça !
C'est aussi une bonne idée.
Je vais surement garder ce code (en faisant quelques petites modifications) sauf si biensur il y a une solution encore meilleure.