CSS : Fonction display: flex a un problème

Bonjour à tous,

Je suis débutant et j'essaie de créer un site.
Malheureusement la fonction display: flex deconne.
J'ai créé un conteneur de type block avec 38% en hauteur et j'y ai inséré 3 images.
Celle-ci s'aligne a l'horizontale à la suite mais je veux utiliser justify-content:space-between. Lorsque donc je le mets les images s'étendent trop entre elles et l'image 2 se situe sur le bord a droite et l'image 3 sort carrément du "cadre". J'ai remarqué que lorsque je mettai juste display: flex cela créait le problème.
Voici le css:

html
{
 height: 100%;
}
body
{
 height: 100%;
 margin: 0; 
 background-color: black;
}
h1
{
 display: flex;
 margin: 0; 
 background-image: url("test.png");
 height: 30%;
 margin-top: 0%;
}
.photo1
{
 height: 50%;
 width: auto; 
}
.photo2
{
 height: 50%;
 width: auto;
}
.photo3
{
 height: 50%;
 width: auto; 
}

Merci d'avance pour vos retours !!