Site desestruturado!

Front-end
#1

bom depois que eu criei uma section no html meu site ficou assim como arrumar?

<!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">
    <link rel="stylesheet" href="style.css">
    <title>portifólio-Geovane</title>
</head>

<body>
    <header>
        <div class="cabeçalho">
            <h1>About</h1>
            <nav>

                <ul>
                    <div class="listas">
                        <li class="primeiro"><a href="#about">About</a></li>
                        <li class="segundo"><a href="#projetos">Projetos</a></li>
                        <li class="terceiro"><a href="#contato">Contato</a></li>
                    </div>
                </ul>

            </nav>
        </div>
    </header>
    <main>
        <section id="about">
            <div class="sobre-mim">
                <img src="foto.png">
                <p class="quem-sou">Meu nome é Geovane tenho 25 anos, estudo linguagem de programação <br> na escola online alura e gosto de tecnologia em geral. <br> Tenho conhecimento em html e css e estou estudando java script e web responsivo. <br> Procuro estágio na
                    área e será muito bom fazer parte da sua equipe. <br> Se quizer saber um pouco mais sobre meu trabalho <br> ou bater um bom papo entre em contato logo abaixo!</p>
            </div>
        </section>
        <section id="projetos">
            <h2>Projetos</h2>
            <p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>
        </section>
        <section id="contato">
            <h3>Contato</h3>
            <nav>
                <ul>
                    <div class="social-midia">
                        <li class="whatsapp">
                            <a href="https://web.whatsapp.com/"><img src="whatsapp.png.png"></a>
                        </li>
                        <li class="linkedin">
                            <a href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png.png"></a>
                        </li>
                        <li class="email">
                            <a href=""><img src="email.png.png"></a>
                        </li>
                    </div>
                </ul>
            </nav>
        </section>

    </main>

</body>

</html>
#2 
body {
   background-color: #e6e6e6;
}

.cabeçalho {
display: flex;
align-items: center;
justify-content: space-between;
}

li {
display: inline-block;
margin: 8px;
font-size: 36px;
}

.quem-sou {
margin: 288px 22px;
position: relative;
font-size: 25px;
}

.p-projetos {
margin: 901px -65px;
font-size: 28px;
}

main {
display: flex;
}

a {
color: black;
}

.listas {
margin: 8px;
}

h1 {
margin: 46px 69px;
font-size: 60px;
}

h2 {
margin: 768px -299px;
font-size: 60px;
}

h3 {
margin: 996px -312px;
font-size: 60px;
align-items: center;
}

img {
margin: 143px 1143px;
position: absolute;
width: 423px;
}

.primeiro :hover {
font-size: 29px;
}

.segundo :hover {
font-size: 29px;
}

.terceiro :hover {
font-size: 29px;
}

.whatsapp {
margin: 9px 458px;
}

.linkedin {
margin: 9px 8px;
}

.email {
margin: 9px 458px;
}

.social-midia {
position: absolute;
margin: 909px -1864px;
}
Css desorganizado!
#3

Assim como?

#4

Posta um print. :slight_smile:

#5

obrigado pessoal já resolvi!