WHY THIS IMAGE DONT WANT TO GO ON THE LEFT OF MY PAGE HHeeurr heurrr :'( :'( :'(

Hey everybody, thank to read my post,

I sent to you my HTML and CSS Code.

I Got a big probleme, the picture "Mel_dessin" don't want to go at the total left of the page. I tied float etc, nothing work. Someone know why ?

Thank you by avance,
Laurent

------------------
HERE MY CODE
------------------

CSS :

@font-face {
font-family: 'Josefin Slab';
font-style: normal;
font-weight: 400;
src: local('Josefin Slab Regular'), local('JosefinSlab-Regular'), url(https://fonts.gstatic.com/s/josefinslab/v7/46aYWdgz-1oFX11flmyEfegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

body{
background-color: rgba(70, 50,145, 0.1)
}

.Mel_dessin{
max-width:300px;
max-height:200px;
text-align: center;
}
.guerrier{
border: 1px dashed rgba(15,10,150,0.7);
font-size: 45px;
text-align:center;
font-family: Arial;
font-style: italic;
margin: 25px;
}

.warrior_watu img {
position: relative;
top: 15px;
margin: auto;
height:400px;
border-radius: 15%;

}
.header {
font-style: italic;
margin: auto;
text-align: center;
}

.header .concentration {
position: relative;
display: block;
float:left;
height: auto;
}
.header #guerrier1 {
position: static;
max-height:400px;
width: auto;
top: 50px;
border-radius:50px;
float: left;
padding-top:25px;
}

.titre_principal {

display: block;
text-align : center;
margin : auto;
}

.introduction {
display: block;
text-align : center;
margin-bottom:auto;
padding: 15px;
}

------------

HTML :

Cybershujaa - le Tuankala de Melcico na Muun BA

Dans le monde de shujaa, des guerriers se battent pour faire triompher la paix parmi leurs troupes.