padding using <mark> in css

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>