Como fazer o conteúdo ocupar 100% da largura horizontal sem deixar scrollbar

Olá, Nathannie!

Há uma propriedade específica para tratar isso chamada 'overflow', quando há este conteúdo para fora da tela (ou seja ultrapassando os 100vw do dispositivo) dizemos que o conteúdo está transbordando, o 'overflow' trata justamente este transbordamendo.

Então como queremos que o conteúdo não transborde nas laterais e gere aquele scroll lateral, colocamos esta propriedade no body já que ele contém todo conteúdo visível da página:

body {
    overflow-x: hidden;
}

Assim esconderá todo conteúdo que transbordar no eixo horizontal (x) e nunca deixará um scroll lateral, se colocarmos o eixo (y) será na vertical e se não definirmos o eixo, aplica-se para ambos. Esta propriedade é uma verdadeira bala de prata para este problema e muito comumente utilizada. Provavelmente seu 'input' estava com uma margin ou padding horizontais com o valor alto para a tela do mobile, mas com o 'overflow' não quebraria o layout, enfim... fica a dica!

Espero ter ajudado, se não conhecia a propriedade 'overflow' lembre-se dela, é realmente útil.