Isto é um comportamento normal, a largura ocupada por todos os <a>
é maior que a da sua div #icons
. Mesmo que você use a propriedade white-space:nowrap
(em #icons
) o conteúdo interno ultrapassará o limite:
Nesse caso você tem duas opções: Diminuir o tamanho ocupado pelos elementos filhos ou aumentar a largura do elemento pai.
Alternativa
Quando não se tem uma quantidade fixa de elementos internos, a melhor solução pode ser utilizar a propriedade flexbox
.
###Exemplo:###
Exemplo:
* {-webkit-box-sizing:border-box;box-sizing: border-box;}
/* Só isso...
Não precisei definir nada nos elementos filhos */
.documents {
display: -webkit-flex;
display: -ms-flexbox;
display: -moz-box;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: center;
}
/* Só para melhorar a visualização, as regras abaixo não tem relevância */
.documents {background: #27ae60;height:60px;width: 300px}
.documents span {color: #fff;margin: 12.5px 1px 0 1px;font-size: 2em}
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'/>
<p>Com um único elemento</p>
<div class='documents'>
<span class='fa fa fa-file-word-o'></span>
</div>
<p>Com mais de um...</p>
<div class='documents'>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
</div>
<p>Com mais ainda...</p>
<div class='documents'>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
<span class='fa fa fa-file-word-o'></span>
</div>