padding using <mark> in css - html

Question

I am having trouble trying to figure out how to properly use the padding feature in css with the following html where it is only padding the first word on the left-hand side.
the css I am using on that it now that is not working correctly is
mark {
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 10px;
}
<div class="slide-content">
<h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></span></strong></h1>
<h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>
I've also tried calling the padding functions through .slide-content{padding-left: 10px;}
Is there any way I can separate through each the padding through each <mark></mark> section?
^ This is what it looks like when mark{padding right: 8px; padding-left 20px}
I am trying to get each line to be padded on the left like the first word of each element
I have been able to fix it for the right hand side padding by playing with mark more but on the left hand side it is still only the first word in each string that is being padded vs the beginning of each <mark>
It has just occured to me that the padding is being applied on the above line, I am sorry for my previously poor explanations of what I am trying to do.

Answer 1

<mark> is an inline Element
inline element dimensions are not faithfully set to intuitive lengths -- they "wrap" around the content. inline-block and block elements will conform to the dimensions given (more or less. )Add display:inline-block or block.
Demo
mark {
display:inline-block;
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 10px;
}
<div class="slide-content">
<h1><strong><span><mark>COMPREHENSIVE IT </mark><mark> SERVICES YOU CAN TRUST</mark></span></strong></h1>
<h2><mark><span>Let us help you develop an IT </span></mark><mark> Optimization Strategy and </mark><mark> Define your technological </mark><mark> priorities</mark></h2>
</div>

Answer 2

Adding <br> fixed my problem above regarding the padding, thank you #Sabbin for helping out!
<h1 style="text-align: left;"><strong><mark>COMPREHENSIVE I.T. <br></mark><mark> SERVICES YOU CAN TRUST</mark><mark></mark></strong></h1>
<h2 style="text-align: left;"><mark>Let us help you develop an I.T. <br></mark><mark> Optimization Strategy and <br></mark><mark> Define your technological<br></mark><mark> priorities</mark></h2>
mark {
background-color: #89ce40;
color: white;
opacity: 0.89;
padding-right: 5px;
padding-left: 5px;
}

Answer 3

<mark> is by default inline element. So every <mark> block is rendered in one line and thus you don't see the padding in the subsequent rows. It is adding the padding, but at the end of the previous row.
You can address this issue in multiple ways.
One way would be to float:left all <mark> elements and add clear:both so they all go one below another.
mark {
/*your code*/
float:left;
clear:both;
}
Other way would be to make the <mark> elements block elements, but they will take full width. The code would then be:
mark {
/*your code*/
display:block;
}
Using flex, you can achieve the same by using the following code:
mark {
/*your code*/
display: flex;
}
Choose what works best for you.