Imagem fora de posição

Bom dia, referente a aula 10, quando coloco a borda na foto ela sai de posição, retornando próximo ao rodapé. Não consegui localizar o erro. Segue o CSS e o HTML:

.navegacao {
  background-color: #3C1D3D;
  color: #F2FFFC;
  padding: 20px;
  text-align: center;
  clear: right;
  box-sizing: border-box;
}

.navegacao, .minha-foto {
    float: right;
    width: 15%;
    border-left: 10px solid black;
    border-bottom: 10px solid black;
}

<img src="img/eu.jpg" alt="Foto de João da Silva" class="minha-foto">
        <aside class="navegacao">
            <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="https://github.com/joaodasilva">
                      <img src="img/github.png" alt="Github">
                  </a>
              </li>
              <li>
                  <a href="https://twitter.com/joaodasilva">
                      <img src="img/twitter.png" alt="Twitter">
                  </a>
              </li>
              <li>
                  <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                      <img src="img/linkedin.png" alt="LinkedIn">
                  </a>
              </li>
          </ul>
        </aside>