Safari sometimes doesnt center text horizontally - html

Question

I am trying to center text in photo. It works in chrome/mozilla perfectly, though there are problems with Safari.
Here are screenshots of the div from different browsers:
Safari:
Chrome:
When page is refreshed on Safari the text is often centered.
I dont have any ideas how to fix that.
HTML:
<div id="giftsHeaderPhoto" class="akcija">
<div class="subCategoryName">
<h1 > Grožis </h1>
</div>
<div class="intro_block">
<div class="intro_text">
<div class="intro_text-short">
<span>{$intro_text}</span>
</div>
<div class="intro_text-buttonBox">
<span class="buttonShowMore">Plačiau</span>
</div>
</div>
</div>
</div>
SCSS:
#giftsHeaderPhoto {
width: 100%;
height: 350px;
background-size: 1920px 350px;
background-position: center top;
background-color: white;
margin-top: 0px;
position: relative;
z-index: 2;
&::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
transition: background-color 0.3s;
}
&:hover::after {
background-color: rgba(0,0,0,0.5);
transition: background-color 0.3s;
}
.subCategoryName {
width:80%;
margin: auto;
padding-top: 80px;
padding-bottom: 40px;
color:rgba(white, 0.8);
text-align:center;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 300ms;
letter-spacing: 15px;
h1 {
font-weight: 1000;
color: white;
}
Expected behaviour: subCategoryName class is always centered in any browser.
Outcome: subCategoryName class is more to the right in Safari sometimes.

Answer 1

Try this,
Add the property
margin: auto;
to the container div ie, the parent div where all your sub divisions are contained.
also provide,
text-align: center;
to the actual element to be centered.
if nothing works, a <center>...</center> tag may help.
You can also refer this link for details.

Answer 2

You can use this code
body {
margin: 0px;
}
#giftsHeaderPhoto {
width: 100%;
height: 350px;
background-size: 1920px 350px;
background-position: center top;
background-color: white;
margin-top: 0px;
position: relative;
z-index: 2;
}
#giftsHeaderPhoto::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
transition: background-color 0.3s;
}
#giftsHeaderPhoto:hover::after {
background-color: rgba(0, 0, 0, 0.5);
transition: background-color 0.3s;
}
.subCategoryName {
width: 80%;
margin: 0 auto;
padding-top: 80px;
padding-bottom: 40px;
color: rgba(white, 0.8);
text-align: center;
position: relative;
z-index: 1;
overflow: hidden;
transition: all 300ms;
letter-spacing: 15px;
}
h1 {
font-weight: 1000;
color: white;
text-align: center;
}
.intro_block {
text-align: center;
margin: 0 auto;
}
<div id="giftsHeaderPhoto" class="akcija">
<div class="subCategoryName">
<h1> Grožis </h1>
</div>
<div class="intro_block">
<div class="intro_text">
<div class="intro_text-short">
<span>{$intro_text}</span>
</div>
<div class="intro_text-buttonBox">
<span class="buttonShowMore">Plačiau</span>
</div>
</div>
</div>
</div>