Min and max-width mess up text-align center
Heading1 is a block-level element.
But text-align property in CSS is used for aligning the inner content of a block element(inline and inline-block elements)
So your text-align won't do anything to a block element itself but really can center the contents in the block element.
Check this out:
The Reason Why Max-Width MessUp Text-align
* {
margin:0;
padding:0;
}
.container {
width: 100%;
height: 100vh;
border: 1px solid red;
text-align: center;
}
.item {
border: 1px solid red;
background: gray;
height:5vh;
}
.withMaxWidth {
max-width: 60%;
}
.inline-block {
display:inline-block;
}<article class="container">
<p class="item">A normal block element seems centered</p>
<p class="item withMaxWidth">A max-widthed block element</p>
<p class="item inline-block">An inline-block element centered by text-align</p>
</article>The text within the h1 is actually centered, but it is centered within a 100px width box. If you want the h1 to float in the middle of the window then add a margin:0 auto;. The primary reason that the h1 is aligned to the left has to do with the display:box property.
h1 {
min-width:100px;
max-width:100px;
text-align:center;
margin:0 auto;
}<h1>this is a really, really long sentence</h1>