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

[Anonymous]

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

Код: Выделить всё

Name
[*]





[url=#top]Edmund Duhonský[/url]


[list]

[url=#portfolio]Portfolio[/url]

[*]
[url=#o-mne]O mně[/url]

[*]
[url=#kontakt]Kontakt

[/list]





[img]Fotky\webdesign hero placeholder.jpg[/img]
          alt=""
class="hero-image"
/>



text 1
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text














Všechna práva vyhrazena.  © Name 2025


Zpět nahoru[/url]



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;
};

вот мой 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;
}

Фрагмент:

Код: Выделить всё

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;
}

Код: Выделить всё

Name
[*]





[url=#top]Edmund Duhonský[/url]


[list]

[url=#portfolio]Portfolio[/url]

[*]
[url=#o-mne]O mně[/url]

[*]
[url=#kontakt]Kontakt

[/list]





[img]Fotky\webdesign hero placeholder.jpg[/img]
          alt=""
class="hero-image"
/>



text 1
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text
text














Všechna práva vyhrazena. © Name 2025


Zpět nahoru[/url]



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;
};

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