Ajuste

Boa tarde pessoal,

Preciso de uma ajuda, estou fazendo um site e quando eu reduzo o tamanho da página ele não adapta. Fiz uma faixa azul usando o código abaixo:

HTML
            <div id="top">
                <div class="container">
                    <div class="social">
                        <img src="./Imagens/social-media.png">
                        <img src="./Imagens/social-media (1).png">
                        <img src="./Imagens/social-media (2).png">
                        <p>Venha emitir conosco - Para alterar a região clique <a class="mudarRegiao" href="">aqui.</a></p>
                    </div>
                    <div class="login">
                        <a href=""><img src="./Imagens/security.png "><span>Login</span></a>
                        <a href=""><img src="./Imagens/account.png "><span>Criar Conta</span></a>
                        <a href=""><img src="./Imagens/cart.png "><span>Meu Carrinho</span></a>
                    </div>
                </div>
            </div>
#top { 

    background: #069BF9;
    color: #eeeeee;
    padding: 10px 0;
    height: 20px;

}

Essa faixa quando eu reduzo a página ela não muda de tamanho e todo conteúdo vai para fora da faixa. Preciso, por gentileza, da ajuda para adaptar essa faixa.

Aproveitando, sei que também temos como configurar para esconder os icones quando chega em um tamanho específico de tela.

Muito obrigado...