Якорь не работает

Question

поэтому сегодня я работал на веб-сайте моей компании, и я наткнулся на ошибку: якоря не работают. Когда я удаляю CSS, он отлично работает, но когда он там, ну ... Вы знаете. В любом случае, так как я не хочу показывать ВСЕ мой код. Вот только CSS. Еще раз, не знаю, что не так. Пожалуйста помоги!

html { 
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/2/27/Abstract_-_Wall_(Imagicity_996).jpg"); 
    background-size: cover; 
    background-attachment: fixed; 
    font-family: sans-serif; 
} 

body { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;    
    overflow-x: hidden; 
    margin: 0px; 
} 


.head { 
    z-index: -1; 
    position: fixed; 
    top: 200px; 
    left: 50%; 
    margin-left: -150px; 
    text-align: center; 
    color: white; 
} 

.head img { 
    width: 300px; 
} 

.bottom { 
    position: fixed; 
    width: 300px; 
    left: 50%; 
    top: 75%; 
    margin-left: -150px; 
} 

.bottom a > img { 
    margin: auto; 
    width: 50px; 
    height: 50px; 
    background-color: white; 
    border-radius: 360px; 
} 

.story { 
    width: 100%; 
    height: auto; 
    background-color: white; 
    margin-top: 100vh; 
    text-align: center; 
} 

.story .text { 
    width: 90%; 
    height: 100%; 
    background-color: white; 
    padding-top: 10px; 
    text-align: center; 
    margin: auto; 
} 

.story img { 
    display: inline-block; 
    height: 200px; 
    padding: 25px; 
} 

.story p { 
    margin: 0px; 
    margin-top: 10px; 
    background-color: white; 
} 

.story h2 { 
    width: 50%; 
    margin: 10px; 
    margin-top: 10px; 
    background-color: white; 
    margin: auto; 
} 

#product { 
    width: 100%; 
    height: 100%; 
} 

.nav h3 { 
    position: fixed; 
    top: 0px; 
    z-index: -1; 
    color: white; 
    padding: 5px; 
    display: inline-block; 
} 

.nav h3:hover { 
    text-decoration: underline; 
} 

Answer 1

Хм ... эти -1-индексы выглядят интересными. Вы должны исследовать их.