Centering left-aligned text - html

Question

I want to center left-aligned text in the yellow box (txtbox).
It looks like that now:
and it want it to be looking like this:
HTML:
<div class="content container small">
<div class="txtbox">
<header style="text-align:left;">
<h2>I AIN'T</h2>
<h2>AN ARTIST.<h2>
<h2>I'M A</h2>
<h2>BEAST!</h2>
</header>
</div>
<footer>
More
</footer>
</div>
CSS:
.container.small {
/* width: (containers) * 0.75; */
width: 900px;
}
.txtbox{
width:800px;
margin:0 auto;
background-color:yellow;
text-align:center;
}

Answer 1

.txtbox header h2{
padding-left: 50px;
}

Answer 2

.txtbox header {
display: grid;
grid-template-columns: 1fr;
width: fit-content;
margin: auto;
background-color: yellow;
text-align: left;
align-items: center;
}
This will put your text in a box. Align the text to the left of the box and fitting the box for the text you have.
Then it will center the box.
This also works when you don't know the width or height.
And remove
style="text-align:left;"
out of the header.

Answer 3

Get rid of the inline style in your
<header style="text-align:left;">
it overrides the stylesheet; leave just
<header>

Answer 4

It took me a little bit to figure out what "centered left-aligned" text mean.
If I understand you correctly, You want the text to be left-aligned on a vertical axis, but centered on the page.
If that is what you want than you can do that by centering your inner header tag like so: width: 132px; margin: 0 auto;
Here's a fiddle to demonstrate:
http://jsfiddle.net/u4sj7/

Answer 5

header h2 { position: relative; left : 30% /* percentage of yellow box */; }

Answer 6

<div class="txtbox">
<div class="centerblock">
<header style="text-align:left;">
<h2>I AIN'T</h2>
<h2>AN ARTIST.<h2>
<h2>I'M A</h2>
<h2>BEAST!</h2>
</header>
</div>
</div>
CSS:
.centerblock {
display:inline-block;
margin:auto;
}

Answer 7

HTML:
<div class="content container small">
<div class="txtbox">
<header>
<h2>I AIN'T</h2>
<h2>AN ARTIST.</h2>
<h2>I'M A</h2>
<h2>BEAST!</h2>
</header>
</div>
<footer> More
</footer>
</div>
Add this to CSS:
.txtbox header {
display: block;
margin: 0 auto;
}