Header not aligning to the center - html

Question

I have a text in the header that I would like to center on smaller screens but I have tried various options and it's not working. Could someone point me in the right direction? Thanks in advance for your help.
Edit: added more code. If I add "width:70%" to .name, it aligns it to the center on some iphones but not others.
body {
margin: 0;
background-color: #e9e9f3;
}
/* Header */
.header .name {
position: absolute;
top: 0.5em;
left: 1em;
margin-left: 4%;
color: white;
font-size: 2em;
font-family: 'Archivo', sans-serif;
}
.social-icon-header {
position: absolute;
top: 3em;
right: 2em;
height: auto;
}
/* Tablets and under */
#media (max-width: 768px) {
* {
box-sizing: border-box;
}
body {
margin: 0;
text-align: center;
}
/* Header */
.social-icon-header {
display: none;
}
.name {
display: flex;
text-align: center !important;
justify-content: center !important;
width: 70%;
}
<div class="hero">
<!--Header-->
<div class="header">
<h2 class="name">Name</h2>
<a class="social-icon-header" href="https://www.tiktok.com" target="_blank">
<i class="fab fa-tiktok fa-2x"></i>
</a>
</div>
</div>

Answer 1

Try to add width: 100% to the name class, so it would take 100% width of the parent container.
.name {
text-align: center !important;
justify-content: center !important;
width: 100%;
}

Answer 2

You have to change the positioning of .name in the media query and set text-align: center for .header. In this way you can change the whole layout for screens with a different size (like in your example a maximum of 768px).
Just make sure that you reset other values that you set before (outside the media query, like top, left and margin-left for .name) that you don't need for other screen sizes. You also forgot to close media query tag.
Also beware of the fact that it's good practice to design css mobile first and then use media queries for bigger screens. https://www.browserstack.com/guide/how-to-implement-mobile-first-design
If you replace you css with the following it'll work:
body {
margin: 0;
background-color: #e9e9f3;
}
/* Header */
.header .name {
position: absolute;
top: 0.5em;
left: 1em;
margin-left: 4%;
color: white;
font-size: 2em;
font-family: 'Archivo', sans-serif;
}
.social-icon-header {
position: absolute;
top: 3em;
right: 2em;
height: auto;
}
/* Tablets and under */
#media (max-width: 768px) {
.social-icon-header {
display: none;
}
.header {
text-align: center;
}
.header .name {
position: relative;
left: auto;
top: auto;
margin: 0;
}
}