Почему панель навигации не находится в одном и том же месте для каждой страницы с фоновым изображением? [закрыто] ⇐ CSS

[Anonymous]

У меня есть четыре страницы, все с фоновым изображением вверху. Хороший образ, как он должен работать. На всех трех страницах на изображение наложена горизонтальная панель навигации, но я не могу заставить четвертую страницу сделать то же самое. Навигация внизу картинки Это изображение снизу картинки, ссылки белые, поэтому они не видны, но видно красное подчеркивание. Надеюсь, это поможет.
Это CSS, который я использую для каждого фонового изображения:

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

.header {
min-height: 50vh;
background-image: linear-gradient(rgba(4, 9, 30, 0.3), rgba(4, 9, 30, 0.3)), url(/images/AtSea_mod01);
background-position: center;
background-size: cover;
position: relative;
}

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

.header-history {
min-height: 50vh;
background-image: linear-gradient(rgba(4, 9, 30, 0.3), rgba(4, 9, 30, 0.3)), url(/images/military-81782_1280.jpg);
background-position: center;
background-size: cover;
position: relative;
}

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

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

.header-reunion {
min-height: 50vh;
background-image: linear-gradient(rgba(4, 9, 30, 0.3), rgba(4, 9, 30, 0.3)), url(/images/military-81782_1280.jpg);
background-position: center;
background-size: cover;
position: relative;
}

Это CSS панели навигации:

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

.nav-links {
flex: 1;
text-align: left;
}
.nav-links ul li {
list-style: none;
display: inline-block;
padding: 8px 12px;
position: relative;
}
.nav-links ul li a {
color: white;
text-decoration: none;
font-size: 1em;
}

У меня есть дополнительный CSS для создания раскрывающегося меню, но я уверен, что это не влияет на проблему с позиционированием.
Я пробовал менять изображения, изменение позиции: относительная; на позицию: абсолютная;, но это вызывает всевозможные другие проблемы с позиционированием остального контента. Я создал новый файл CSS, новый файл html и построчно закомментировал CSS.
Я использую Edge, обновления актуальны.
Изменить, пытаясь включить страницу index.html:


< pre class="snippet-code-html lang-html Prettyprint-override">

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

[*]




Home





[url=/index copy.html]History [/url]
[*][url=/index copy.html]Specs[/url]
[*][url=/index copy.html]Memorials[/url]
[/list]

[*]
[url=/html/reunion3.html]Current[/url]
[*][url=https://fonts.gstatic.com]



Reunion





Logo[/url]

[list]

[url=/index.html]About[/url]

[url=/index copy.html]History [/url]
[*][url=/index copy.html]Specs[/url]
[*][url=/index copy.html]Memorials[/url]
[/list]

[*]
[url=/html/reunion3.html]Current[/url]
[*]Previous
[/list]

[*]Media
[*]News & Updates
[*]Membership
[*]Donate!









Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, quos dolore? Debitis impedit magni perferendis fugit doloribus repellendus nihil! Eligendi soluta, vitae cum distinctio aliquam nobis amet fugit ab iure.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. In sit iste quia similique eos qui animi at nam? Maiores officiis ipsum aut repudiandae omnis molestiae maxime accusantium fugit quia doloremque.







Lorem, ipsum dolor sit amet consectetur adipisicing elit.  Libero rem adipisci similique sit laboriosam voluptatibus culpa consequuntur quasi accusamus! Veniam nihil quas officiis consequatur incidunt, earum libero dolorem nam inventore.
Your
cancelled check is your receipt. Membership fees and donations are not tax deductible.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique sint sapiente sequi, culpa illum enim natus facilis deleniti est eos repellendus ab debitis inventore explicabo saepe vero at dolorem ipsum?

Current Reunion Information: Lorem ipsum dolor sit amet consectetur adipisicing elit. In facilis ea tempora repellat quasi minus rerum aspernatur omnis ad culpa necessitatibus ducimus vel, obcaecati sit fugiat architecto unde et? Debitis.

Подробнее здесь: https://stackoverflow.com/questions/790 ... ound-image