Anchor's won't work

so today I was working on my company's website and I ran across a bug: The anchors don't work. When I remove the CSS it works fine, but when it's there, well... You know. Anyways, since I don't want to show ALL of my code. Here is just the CSS. Once again, no idea what is wrong. Please help!

html {
    background-image: url("http://ift.tt/1TVTU12");
    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;
}