Oi Roberto, pelo seus arquivos, o problema está exatamente aqui:
aside, img {
float: right;
width: 15%;
}
O que acontece? Bom, o aside fica com 15% da tela? de 1000, isso seria 150, certo? Ai as imagens que estão dentro do aside, ficam com 15%, deste 150, que vai dar coisa de 22.5. Certo?
Na verdade estamos certo até o segundo passo, por que o último cálculo não está certo, visto que as imagens não estão dentro do aside diretamente, mas sim dentro da ul, li, a... O que no final está gerando esse tamanho bem pequeno.
Solução rápida? Remove a seleção das imagens no css pra que elas não peguem 15% do tamanho de onde elas estão.
aside{
float: right;
width: 15%;
}
Depois seu projeto vai quebrar, por que outras partes do CSS estão incorretas. O text-indent usado nos links vai fazer com que as imagens sumam, então removemos o text-indent também:
.icones-redes-sociais a{
width: 40px;
height: 40px;
display: block;
}
Depois, vai precisar mudar a tag img da foto do João da silva pra dentro da tag aside. Assim a barra lateral vai pro lugar certo.
<aside class="navegacao-site">
<img src="eu.jpg" alt="Foto de João da Silva" id="joao-da-silva">
<h1>João da Silva</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="bio.html">Sobre mim</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
<ul class="icones-redes-sociais">
<li>
<a href="http://github.com/joaodasilva">
<img src="github.png" alt="Github">
</a>
</li>
<li>
<a href="http://twitter.com/joaodasilva">
<img src="twitter.png" alt="Twitter">
</a>
</li>
<li>
<a href="http://linkedin.com/joaodasilva">
<img src="linkedin.png" alt="LinkedIn">
</a>
</li>
</aside>
Você ainda vai ter um problema: O tamanho da imagem do joão da silva, vai estar maio que o tamanho do aside gerando uma rolagem horizontal. Esse você pode resolver?
