Css desorganizado!

Front-end
#1

como fazer para a parte dos icones de contato ficar alinhado e com um tamanho legal?

<!DOCTYPE html>

<html lang="pt-br">

<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</a></li>

                        <li class="segundo"><a href="">Projetos</a></li>

                        <li class="terceiro"><a href=" ">Contato</a></li>

                    </div>

                </ul>

            </nav>

        </div>

    </header>

    <main>

        <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>

        <h2>Projetos</h2>

        <p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>

        <h3>Contato</h3>

        <nav>

            <ul>

                <div class="social-midia">

                    <div class="container">

                        <div class="box">

                            <li class="whatsapp">

                                <a href="https://web.whatsapp.com/"><img src="whatsapp.png.png"></a>

                            </li>

                        </div>

                        <div class="box">

                            <li class="linkedin">

                                <a href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png.png"></a>

                            </li>

                        </div>

                        <div class="box">

                            <li class="email">

                                <a href=""><img src="email.png.png"></a>

                            </li>

                        </div>

                    </div>

            </ul>

        </nav>

    </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;
}

.container {
    display: flex;
    justify-content: space-between;
}

.box {
    height: 100px;
    background-color: black;
    width: 200px;
}
#3

Po @geovane10, vc coloca um título generalizado
“Css desorganizado”
Pq já não coloca: “Como alinhar tal coisa no CSS”

Uma descrição também generalizada:

“ficar alinhado e com um tamanho legal”
Alinhado ao que? Ao topo? Centro? O que seria um tamanho legal pra vc? Isso é subjetivo…

E também mostra como está ficando, pra termos uma noção da coisa. Geralmente respondemos no olhometro, se vc só mandar o código (NESSE CASO) fica complicado entender oq vc quer

Obs. Não é a primeira vez que isso acontece, por isso tô comentando. E outra coisa tbm, vc some do fórum e depois de dias reaparece dizendo que resolveu a situação, o pessoal vai ficando sem vontade de responder assim.

Fora a formatação de código, que vc só cola o código aqui no forum, dificultando a visualização do mesmo. Antes de postar, seleciona o código todo e clica em </> (isso é obrigatório), toda vez um moderador tem que editar suas perguntas

2 curtidas
#4

Foi mal aí Abner, e realmente eu não sou muito claro quando coloco as minhas dúvidas, mais você disse que eu sumi do fórum e isso não é verdade e eu achei também que vocês fazem testes para ver onde está o erro mais enganei, mais beleza foi mal aí, tenho que reconhecer meu erro !

#5

Concordo com @rodriguesabner. Quem quer ser ajudado tem que se esforçar ao máximo pra ser claro e o mais pontual possível. Eu por exemplo entro mais pelo celular, então raramente tenho como responder questões poucos claras que exigem testar todo um código.

#6

Acho que isso seria um exemplo do que ele quis dizer:

#7

Minha intenção não é expulsa-lo do fórum, apenas informar. Espero que não leve a mal.

Como o @javaflex mencionou, também entro bastante pelo celular, aí fica complicado

#8

Não cara você até me ajudou falando isso eu coloco dúvida geralmente desse jeito em fórum, mais vou fazer diferente agora, a pergunta era como fazer os meus ícones de contato ficar alinhado um do lado do outro, eu teria que colocar o print da tela de como ele tá?

#9

Mais eu coloquei (</>) não entendi porque não foi formatado agora que vc tá me mostrando ache que tava certo!

#10

Captura%20de%20tela%202021-05-05%20062524
Captura de tela 2021-05-05 062524.png1311×422 73.7 KB

#11

eu quero posicionar um do lado do outro e diminuir também o tamanho!

#12 
<!DOCTYPE html>
portifólio-Geovane

About

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

        </nav>
    </div>
</header>
<main>

    <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>


    <h2>Projetos</h2>
    <p class="p-projetos">Por enquanto só tenho o meu proprio portifólio!</p>


    <h3>Contato</h3>

    <nav>
        <ul>


            <div class="social-midia">
                <div class="container">
                    <div class="box">
                        <li class="whatsapp">
                            <a href="https://web.whatsapp.com/"><img src="whatsapp.png.png"></a>
                        </li>
                    </div>
                    <div class="box">
                        <li class="linkedin">
                            <a href="https://www.linkedin.com/in/geovaneferreira10/"><img src="linkedin.png.png"></a>
                        </li>
                    </div>
                    <div class="box">
                        <li class="email">
                            <a href=""><img src="email.png.png"></a>
                        </li>
                    </div>
                </div>

        </ul>
    </nav>



</main>
#13 
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;
}

.container {
display: flex;
justify-content: space-between;
}

.box {
height: 100px;
background-color: black;
width: 200px;
}