Need some help to fix the background of a text box

[Shockowaffel]

I have some knowledge about html and css and I am confident in beeing able to hack through most problems through trial and error, but in this case I dont even have an idea on how to fix it and I am afraid it's really simple.

So I simply want this black background behind the text and it's supposed to be equal on both sides, but the padding starts virtually too late for that to work.

body {position: relative;}
		 
body,html,h1,h2,h3,h4,h5,h6,p {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #777777;
    line-height: 1.8;}

html {font-size:1rem;}

body {font-size:100%;}

h1  {font-size: 1.777em;
	text-align: center;
	color: white;}
.headline2 {letter-spacing: 0.8em;}	

.w3-wide {letter-spacing: 0.625em;}

 

<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
  <div class="w3-display-middle">
    <h1><span class="w3-black w3-padding-large w3-wide w3-animate-opacity">THORSTEN ERDT</span></h1>
    <h1><span class="headline2 w3-animate-opacity">ILLUSTRATION</span></h1>
  </div>
</div>

 

Edited May 27, 2018 by Shockowaffel

[Ingolme]

It looks like the behaviour of the letter-spacing property is to add additional space to the right of each letter rather than equally distribute it on both sides. This means that you will have to adjust the padding to accommodate that. Since the letter spacing is in ems, you'll have to define the padding in ems and have the right padding be the letter-spacing amount less than the left padding.

[Shockowaffel]

Thank you, to check for what you said, I removed the w3-wide padding and added an inline padding to the first h1 (dont mind the high value)

<div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
  <div class="w3-display-middle w3 mobile">
    <h1 class="w3-black w3-padding-large w3-animate-opacity" style="padding-left: 5.5em">THORSTEN ERDT</h1>
    <h1 class="headline2 w3-animate-opacity">ILLUSTRATION</h1>
  </div>
</div>

Here's the result:

While it got rid of the excess space (and all letter spacing at that) for some reason the padding doesnt seem to affect it at all.

Also, if I remove the w3-black class and try to add a css style for background-color:"black" on h1 nothing happens either. The css wouldnt add a black background, only the w3-black does.
I am starting to get the impression that the w3-display-container is preventing css styling beyond font, fontsize and spacing or something like that.

Now, were I to remove the w3-padding large  class, the inline padding would actually be applied for some reason. (not the image)

Edited May 28, 2018 by Shockowaffel

[Shockowaffel]

So, I experimented around some more and it seems the "solution" I am ok with right now is to add padding on the left side of the text equal to the letter spacing to accomodate for the excess space on the right.

Ingolme's suggestion to fix the right side padding only works when you have enough space to work with.
If you have a case like this where your padding (0.5em) is smaller than the letter spacing (0.625em), reducing the padding by the value of the spacing would leave you with a negative value for padding and as far as I know, that doesnt work, does it ?

So I have to  compromise on my design and add padding on the left to fix this imbalance.

 

And I noticed this issue also affects the general centered positioning of Text.
That means when you have text with large spacing and you want it to be centered, you need to add padding on the left equal to the letter spacing.

Otherwise you get this on small screens:

[dsonesuk]

            #home > div > h1 span {
                display: block; /* to fill entire parent width avaiable*/
				display: inline-block; /* to fill to content width*/
            }

			.w3-padding-large.gutterless {padding-left: 0 !important; padding-right: 0 !important;}

            .headline2 {letter-spacing: 0.8em; text-indent: 0.8em;}

            .w3-wide {letter-spacing: 0.625em; text-indent: 0.625em;}

        <div class="bgimg-1 w3-display-container w3-opacity-min" id="home">
            <div class="w3-display-middle">
                <h1><span class="w3-black w3-padding-large w3-wide w3-animate-opacity gutterless">THORSTEN ERDT</span></h1>
                <h1><span class="headline2 w3-animate-opacity">ILLUSTRATION</span></h1>
            </div>
        </div>

 

Edited May 28, 2018 by dsonesuk