CSS Text Background-Color gets cut off -

first of all, guideline aswell want achieve:

it doesn't need 100% alike @ least 1 space @ each endofline should given. well, happens when try it:

as can see, end of first line beginning of second line have no space border. start of first line , end of second line on other hand, have space.

here html- & css-markup.

<div class="headline-h2"> <h2>lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. @ vero eos et accusam et justo duo dolores et ea rebum.</h2> </div>   h2 { background-color: #000000; clear: left; color: #ffffff; display: inline; float: left; font-size: 14px; font-weight: normal; padding: 4px; position: relative; }  .headline-h2 { float: left; margin-bottom: 28px !important; width: 100%; } 

i tried few things cannot life work thing out. have add text variable, therefore different if customer wants it. needs said explicitly need inline-element. know works block.

why not add padding h2:

h2 {     background-color: #000000;     clear: left;     color: #ffffff;     display: inline-block;     float: left;     font-size: 14px;     font-weight: normal;     position: relative;     padding-left: 5px;     padding-right: 5px;  }