The text of header
is inside a tag H1
, that does not occupy all the size of the header
, add to it a width: 100%
will work simply by using together a text-align: center
:
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
header {
min-height: 9px;
display: flex;
align-items: center;
background-color: #383c38;
}
header h1 {
font-size: 2.5em;
color: #fff;
width: 100%;
text-align: center;
}
<header>
<h1>Login-Helper</h1>
</header>
Another way to need to use the width: 100%
is using margin: 0 auto
(can see more about margin
here: https://developer.mozilla.org/en-US/docs/Web/CSS/margin):
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
}
header {
min-height: 9px;
display: flex;
align-items: center;
background-color: #383c38;
margin: 0 auto;
}
header h1 {
font-size: 2.5em;
color: #fff;
margin: 0 auto;
}
<header>
<h1>Login-Helper</h1>
</header>
If you want to use flex to center horizontally, in your example use
justify-content: center
, nayalign-items
.– Rafael Tavares