Overlapping Information When Using Media Queries

I developed this site www.prolinesound.com.br , in the desktop version everything is perfect but when I started adjusting the media -queries to make you more mobile-friendly, I encountered a problem. When I click on the who we are link, it blocks some of the text, and I click on some other link (which is working) and then click on "who we are" position the screen above where it should.

Can anyone help me?

HTML                

Responsive CSS

@media screen and (max-width: 520px){
.pageTopo{
    width: 520px;
}
.pageWhite{
    padding: 50px 0px 10px 0px;
    width: 520px;
}
.pageGray{
    padding: 50px 0px 10px 0px;
    width: 520px;
    min-height: 750px;
}
.container{
    width: 520px;
    margin: 0px auto;
    padding: 0px 0px;
    box-sizing: border-box;
}

Default CSS

.pageTopo{
background-color: rgb(225, 225, 225);
position: relative;
width: 100%;
z-index: 100;
display: block;

} .pageWhite {     background-color: #FFFFFF;     width: 100%;     min-height: 600px;     position: relative;     display: block;     padding: 70px 0px 25px 0px; } .pageGray {     background-color: #EEEEEE;     width: 100%;     min-height: 550px;     position: relative;     display: block;     padding: 70px 0px 25px 0px; } .container {     width: 1020px;     margin: 0px auto; }