[Résolu] Problème titres flexbox par JustinMoutier - page 1

Bonjour,

Je coince depuis pas mal de temps sur le sous titre que je n'arrive pas à coller au titre principal. J'ai utilisé flex-direction: column; ensuite justify-content:center; mais rien n'y fait. Je ne comprends pas. Si quelqu'un peut m'aider...

Merci d'avance

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
        <title>CV</title>

    </head>


    <body>
		<div id="blocpage"> <!-- Ce bloc est une flexbox qui contient les éléments liseret, main et image -->
			<div class="liseret"></div> <!-- 1er élément de la flexbox blocpage -->
			<main> <!-- 2eme élement de la flexbox blocpage-->
				<div class="titres"><!-- flexbox column pour titre et sous titre-->
					<h1> MOUTIER Justin </h1>
					<h4>Logisticien polyvalent</h4>
				</div>
				<section> <!-- Ce bloc est une flexbox contenant les 3 paragraphes ci-dessous -->
					<div class="elementun">
						<h2>Mon expérience</h2>
							<ul>
								<li><Strong>De 2010 à 2011</Strong> Mission en tant qu'intérimaire chez 3 suisses à Croix </li>
								<li><Strong>De 2011 à 2017</Strong> Magasinier chez D'halluin aciers à Lesquin</li>
								<li><strong>De 2017 à ce jour</strong> Formation openclassroom pour devenir développeur web junior</li>
							</ul>
					</div>
					<div class="elementdeux">	
						<h2>Mes compétences</h2>
							<ul>
								<li>Management</li>
								<li>Gestion de stock</li>
								<li>Projet logistique divers</li>
								<li>Contrôle qualité</li>
								<li>Chargement, déchargement</li>
							</ul>
					</div>
					<div class="elementtrois">
						<h2>Ma formation</h2>
							<ul>
								<li>Contrat d'apprentissage à l'<strong>AFT IFTIM</strong></li>
								<li>Obtention du baccalauréat logistique</li>
								<li>Obtention du BTS logistique</li>
							</ul>
					</div>
				</section>
			</main>
			<img class="image" src="photoid.jpg" alt="photo d'identité" />	<!-- 3eme élément de la flexbox blocpage-->
						
			
			
			
					
		
		</div>
    </body>

</html>

@font-face
{
font-family:"supernatural";
src: url("supernatural.ttf");	/* mise en place d'une police personnalisé */
}

h1,h4
{
font-family:"supernatural"; /* police personnalisée */
 /* Alignement du titre et du sous titre */
}

h1
{
font-size:350%;
border:solid;
}

h4
{
font-size:x-large;
border:solid;
}

.liseret
{
height:800px;
border:solid;
width:10%;
background-color:black;
}


.titres
{
display:flex;
flex-direction:column;
width:30%;
justify-content:center;
align-items:center;
margin:auto;
border:solid;
}

#blocpage
{
height:800px;
display:flex;
justify-content:space-between;	

}

section
{
display:flex;	
flex-direction:row;
justify-content:space-between;
margin-top:100px;
font-size:130%;
}

.elementun
{
width:50%;
}

img
{
width:10%;
height:20%;
border-radius: 3px;
border:solid;
box-shadow: black 2px 2px 2px 2px; /* Application d'une bordure et d'un effet d'ombre sur la photo */
border-color:black;
}

h2
{
color:maroon; /* Changement de couleur des sous titres */
text-align:center;
}

body
{
background-image: url("fond.jpg"); /* image de fond */
}