Почему мой заголовок смещен вправо, а не по центру? ⇐ Html

[Anonymous]

Я создаю свой первый веб-сайт и не могу понять, почему заголовок переместился вправо. Я впервые делаю что-то подобное, и создание панели навигации заняло у меня некоторое время, но когда я добавляю изображение героя, герой и заголовок не выравниваются, и я не знаю, как это исправить. Любая помощь приветствуется.
вот мой html:





Name
[*]





Edmund Duhonský

• Portfolio
• O mně
• Kontakt

[img]Fotky\webdesign hero placeho ... pět nahoru



var prevScrollpos = window.pageYOffset;
window.onscroll = function () {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("header").style.top = "0";
} else {
document.getElementById("header").style.top = "-100px";
}
prevScrollpos = currentScrollPos;
};





here's my css:
html {
scroll-behavior: smooth;
}
body {
font-size: 1rem;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
color: #2b2118;
background-color: #fffdf6;
max-width: 1440px;
margin: auto;
}
h3 {
font-size: 1.5rem;
}
h3 .ruzove-h3 {
color: #d2266a;
}
h3 .oranz-h3 {
color: #fe7f2d;
}
h2 {
font-size: 2.25rem;
}
h1 {
font-size: 3.375rem;
}
footer {
margin: 0 6.25rem 0 6.25rem;
}
.header {
display: flex;
align-items: center;
background-color: #f7f3e3;
margin: 0 6.25rem 0 6.25rem;
padding-top: 0.8rem;
padding-bottom: 0.8rem;
position: fixed;
top: 0;
width: 100%;
max-width: 1440px;
transition: top 0.3s;
z-index: 100;
}
.header-jmeno {
margin-inline: auto;
margin-left: 6.25rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-odkaz {
display: inline-flex;
align-items: center;
justify-content: left;
overflow: hidden;
text-decoration: none;
font-weight: 600;
color: #d2266a;
font-size: 1.5rem;
}
.nav-links {
display: flex;
gap: 3rem;
padding: 0;
margin: 0 6.25rem 0 0;
list-style: none;
align-items: center;
}
.nav-links a {
display: inline-flex;
border-radius: 50px;
text-decoration: none;
color: #2b2118;
z-index: 1002;
}
button {
border: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: 1rem;
cursor: pointer;
border-radius: 40px;
z-index: 1003;
}
.pink-button {
background-color: #d2266a;
color: #f9f5e9;
}
.hero-image {
max-width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
top: 4.5rem;
}


Подробнее здесь: https://stackoverflow.com/questions/798 ... t-centered