The spacing between my headers and body of text is not consistent

Hello, Though custom CSS i have added different header styles. but when i put them on my page i get different spacing between my header and mu main text while the css and the HTML are the same. Here are some screen captures of the problem. 

code for the headers

h4 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(330, 65%, 53%);
text-align: left;
margin-bottom: -30px !important;
}
h5 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(25, 66%, 51%);
text-align: left;
margin-bottom: -30px !important;
margin-top: -3px !important;
}
h6 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(46, 87%, 56%);
text-align: left;
margin-bottom: -30px !important;
margin-top: -3px !important;
}
h7 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(143, 100%, 30%);
text-align: left;
margin-bottom: -30px !important;
margin-top: -3px !important;
}

h8 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(210, 55%, 42%);
text-align: left;
margin-bottom: -30px !important;
margin-top: -3px !important;
}
h9 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(273, 47%, 33%);
text-align: left;
margin-bottom: -30px !important;
margin-top: -3px !important;
}
h10 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(358, 71%, 49%);
text-align: left;
margin-bottom: -30px !important;
margin-top: -3px !important;
}
h11 {
font-family: 'ALTE-Regular2', normal;
font-weight: 400;
font-size: 30px;
letter-spacing: 0.20em;
text-transform: None;
line-height: 0.7em;
color: hsl(0, 0%, 0%);
text-align: left;
margin-bottom: -30px !important;
}

here is the HTML of the text on the page 

<div>
  <h4> <p>
    
    </p>Les Pieds sur Terre. <p>

</p></h4>
<normal> Un parcours acrobatique le long des rochers digne des plus grands aventuriers 
<p>
</p>4 ans et 1 mètre minimum.</normal>
<h5> <p>
  
  </p>Slalom entre les Sapins.<p>

</p></h5>
<normal> Un parcours d’initiation pour les plus petits avec des tyroliennes comme pour les plus grands. 
<p>
</p>4 ans et 1 mètre minimum.</normal>

<h6> <p>
  
  </p>Graine de Môme<p>

</p></h6>
<normal> Un parcours d’initiation qui grimpe en altitude.
<p>
</p>4 ans et 1 mètre minimum.</normal>

 <h7> <p>
    
    </p>Comme un Oiseau sur la Branche <p>

</p></h7>
<normal> Un parcours d’initiation ideal pour les enfants comme les adultes.
<p>
</p>6 ans et 1,10 mètre minimum.</normal>
  
<h8> <p>
  
  </p>Danse avec les arbres<p>

</p></h8>
<normal> Un parcours d’initiation ideal pour les enfants comme les adultes.
<p>
</p> 8 ans et 1,20 mètre minimum.</normal>
  
<h9> <p>
  
  </p>
Montée de la Fôret<p>
  
  </p>
</h9>
<normal>Parcours intermédiaire pour petits et grands.
<p>
</p>4 ans et 1 mètre minimum.</normal>

<h10><p>
  
  </p>La tête à Travers les Nuages <p>
  
  </p></h10>
<normal>Parcours familial sportif, magnifiques vues et des sensations garanties.
  11 ans et 1,40 mètre minimum.</normal>

<h11><p>
  
  </p>Plus près du Soleil.
<p></p></h11><normal>Parcours sportif et acrobatique, de plus en plus haut, de plus en plus fort.
  11 ans et 1,40m minimum</normal>
</div>

and here is the web page with the spacing problems. the yellow pink and orange title are spaced how i want them to be, whereas the others aren't 

Hi. Can you share link to page where you added above code? We can check easier