Não use largura em seu .wrapper

Quando você faz algo assim:

.wrapper {
    width: 960px;
    margin: 0 auto;
}

O único problema:
quando temos uma janela estreita como em dispositivos móveis e a largura dos elementos de nível de bloco – como o div que você aplicou a classe .wrapper – é muito grande, o navegador cria uma rolagem horizontal e “respeita” a largura do elemento.

Por que não pare de usar larguras e apenas “limite” a área do seu .wrapper ?

.wrapper {
    max-width: 960px;
    margin: 0 auto;
}

Dessa forma, você não precisa se preocupar com pergaminhos malignos ou suporte ao navegador. É compatível com os principais navegadores:
http://caniuse.com/#search=max-width

PS: Inspecione esta página .wrapper e veja como funciona