CSS Não consigo colocar os tópicos no lugar correto

Orlando Namba · 20 de fevereiro de 2023

Bom noite, estou começando a programar a algumas hora e já me deparei com a primeira dificuldade kkkkk. Como eu faço para colocar o: "Início, Quem Somos?, Posts e Contato" mais pra cima??

Vou colocar os códigos digitados até o momento (o HTML e o CSS):

index.html

<html>

   

<head>

    <link rel="stylesheet" type="text/css" href="./css/main.css">

    <title>Beber Comer e Amar</title>

</head>



<body>

    <header class="menu-principal">

        <main class="col-100">

            <div class="header-1">

                <div class="logo">

                    <img src="./img/BCA Logo.png" />

                </div>

                <div class="redes-sociais">

                    <ul>

                        <li><a href=""><img src="./img/faceiconesite1.png" alt=""></a></li>

                        <li><a href=""><img src="./img/instaiconesite1.png" alt=""></a></li>

                    </ul>

                </div>

            </div>

        </main>          

    </header>

    <main>

        <div class="header-2">

            <div class="menu">

                <ul>

                    <li><a href="">Início</a></li>

                    <li><a href="">Quem Somos?</a></li>

                    <li><a href="">Posts</a></li>

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

                </ul>

            </div>  

        </div>

    </main>

</body>

</html>

main.css

body {

    width: 100%;

    height: 100%;

    margin: 0 auto;

    font-family: 'Roboto Condensed', sans-serif;

}

.menu-principal {

    background-color: #e0e1e2;

    height: auto;

}

main {

    margin: 0 auto;

    width: 980px;

    position: relative;

}

.logo {

    float: left;

    padding: 16px;

    width: 10px;

}

.redes-sociais ul li{

    margin-left: 15px;

    display: inline-block;

    float: left;

    list-style: none;

}

.redes-sociais {

width: 200px;

float: right;

margin-top: 6%;

}

.menu ul li {

    display: inline-block;

    color: #da0024;

    margin-left: 30px;

}

.menu ul li a {

    color: #da0024;

    text-decoration: none;

    font-size: 18px;

    text-transform: uppercase;    

}  

.col-100 {

    width: 100%;

    float: left;

    position: relative;

}

DiF · 20 de fevereiro de 2023

@Orlando Namba Retira o float left da class .col-100 se quiser ajustar o logo, faça somente nele... isso vale para o menu.

Além disso, vejo que está aplicando mal o elemento "main". Este elemento é destinado ao conteúdo principal... por isso, dentro de header, separe por "section"