COMO POSICIONAR OS ELEMENTOS | Front-end | Alura

Ola,

Por favor, preciso de ajuda com posicionamento das coisas.

Estou praticando por si só, criar uma pagina na web com o assunto dragões e eu descobri que tenho muita dificuldade com posicionamento dos elementos, principalmente quando se trata de resolução, onde em um PC eu tenho um resultado esperado, mais que em outro, fica tudo desorganizado por conta da resolução diferente

aqui em baixo esta o codigo do meu projeto

O HTML

<!DOCTYPE html>
<html lang="pt-br">

    <head>
        <meta charset="utf-8">
        <title>Dragões</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <h1><img src="DRAGON.png"></h1>
        </header>

        <div class="caixa_1">
            <div class="intro">
                <h2>Dragões</h2>
            
                <p>Dragões ou dragos[1] (do grego δράκων,[2] drákōn) são criaturas mitológicas presentes nas mitologias de diversos povos,</p> 
                <P>civilizações e culturas, com destaque para as tradições chinesa e europeia.</p>
                <p>São representados como animais escamosos de grande porte, normalmente de aspecto reptiliano</p>
                <p>(semelhantes a imensos lagartos ou serpentes), podendo conter asas, escamas, plumas, poderes mágicos, sopro de fogo, entre outros.</p> 
                <P>A palavra "dragão" provém do termo grego drákōn, usado para</p>
                <p>designar grandes serpentes.</p>
            </div>
        </div>
        <img class="sky_dragon" src="SKY_DRAGON.JPG">

        <div class="caixa_atributos">
            <img class="ATRIBUTOS" src="ATRIBUTOS.png">
        </div>
    </body>
</html>

E o CSS

body {
    background-image: url(stone_inicial.jpg);
}

header {
    background-image: url(ESCAMA.jpg);
    width: 100%;
}

.caixa_1 {
    display: inline-block;
    width: 25%;
    padding: 65px;
    height: 550px;
    /*background-image: url(scale_saphira.jpg);*/
    border-radius: 10px;
    box-sizing: border-box;
    /*margin: 30px;*/
    /*margin-bottom: 40px;*/

    
}

.intro {
    text-align: center;
    /*margin: 15px 10px;
    padding: 12px;*/
    font-size: 18px;
    color:gold;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h2 {
    text-transform: uppercase;
    font-size: 30px;
    text-decoration: dashed;
    padding: 10px 0 0 0;
    margin: 10px;
}

p {
    padding-top: 10px;
}

.sky_dragon {
    /*position: relative;*/
    width: 910px;
    margin-top: 900px;
    height: 550px;
    border-radius: 20px;
    margin-left: 82px;
}

.ATRIBUTOS {
    background-color: black;
    width: 700px;
    margin-top: 20px;
    margin-left: 305px;
}

dês de já peço desculpas pela bagunça, tem até coisas comentadas pq não sei se fiz certo (se tinha que estar ali ou não).

att,

Mergulhe em programação