Ajuda com o position | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Estou com uma pequena dificuldade em meus estudos sobre o position, estou criando uma espécie de currículo web, (que pretendo ir melhorando conforme ganho mais conhecimentos) e uma coisa que esta me incomodando bastante é o position.

Como podem ver na imagem abaixo (Que coloquei um pão como demonstração), a imagem até fica posicionada ao centro, porem eu queria colocar a imagem dentro do header, para que ela fica-se dentro da parte pintada de cinza. Mas não estou conseguindo fazer, como posso resolver isso?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Segue o código abaixo:

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curriculo</title>
    <link rel="stylesheet" href="curriculov0.2.css">
</head>
<body>

        <header>
            <div class="cabecalho">
                <h1>Vitor S Motta</h1>
                <div class="cabecalho-box">
                    <img  width="250px" id="perfil" src="Imagens/pao.webp" alt="perfil">
                </div>
                <P><strong>Cidade:</strong> Rio de Janeiro</P>
                <p><strong>Telefone:</strong> (xx)xxxxx-xxxx</p>
                <p><strong>Email:</strong> <a href="mailto:vitormottapsi@gmail.com?subject=Questions" title="">vitormottapsi@gmail.com</a></p>
         </div>
        </header>

CSS:

header{
    background: #cccccc;
}

.cabecalho{
    position: relative;

}
#perfil{

    position: absolute;
    left: 500px;
    right: 500px;
    top: 0px;

}