28128 sujets

CSS et mise en forme, CSS3

Bonjour je n'arrive pas à faire en sorte que mon texte "logo" et ma nav soient opposés mais ne dépassent pas de la page.
voici le html :

/*****************************************************************/
<!DOCTYPE html>
<html lang="fr">
<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="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <title>Accueil</title>
</head>
<body>
    <header>
        <div class="header">
            <a href="#" class="logo">LOGO</a>
            <ul>
                <li><a href="">Accueil</a></li>
                <li><a href="#">Classe</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </header>
    <section class="banner"></section>
    <main></main>
</body>
</html>
/*****************************************************************************************/

et le css :
/******************************************************************************/

:root{
    --primary-normal: #3BF4FB;
    --header : #4900ff;
}
body{
    color: var(--primary-normal);
    margin: 0;
    padding: 0;
    font-family: 'Roboto';
}
.header{
    width: 100%;
    background-color: var(--header);
    height: 50px;

    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.6s;
    padding: 40px 20px;
}
.header > .logo{
    position: relative;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 2px;
}
.banner{
    height: 50px;
}
a{color: var(--primary-normal);}
main{
    height: 94vh;
    background-size: cover;
    background-repeat: no-repeat;
}
/*******************************************************************************/


merci d'avance
Modérateur
Salut,

supprimer width: 100% (surement un souci avec box-sizing) à ton .header et le remplacer par:

.header{
// ....
right:0;
}

Modifié par niuxe (16 Feb 2023 - 20:47)
Meilleure solution
niuxe a écrit :
Salut,

supprimer width: 100% (surement un souci avec box-sizing) à ton .header et le remplacer par:

.header{
// ....
right:0;
}


ça marche merci