css how to adjust height of element content

You can use css line height property.

line-height: normal|number|length|initial|inherit;

My understanding from the screenshots to your question is that you are trying to reduce the blue space, so essentially the space between the words and the div and h1 elements.

You can try to play around with the line-height property. Example:

#mainsubtitle, h1 {
   line-height: 0.75;
}

The above example multiplies the current font-size with 0.75 to set the line height.

You can simply do it by adding padding to both elements.

h1, 
.mainsubtitle {
  padding: 32px 0; /* shorthand for padding-top: 32px, padding-bottom: 32px, padding-left/right: 0px */
}

<div class="container-fluid" id="about">
   <div class="row">
        <div id="mainsubtitle">Something</div>
        <h1>Validation of the email address</h1>
   </div>
</div>