[Résolu] Bug section prends pas toute la place

Yo, ma section prends pas tout l'espace de l'écran, et ça fait que mon fond d'écran est vu en dessous de ma section et ça laisse un sale aspect (voir screen) vous savez d'où ça peut venir?



body css code :

body{
    font-family: Sunday, sans-serif;
    margin: 0px;
    padding: 0px;
    background-position: top center;
    background-color: #555555!important;
    background-image: url(../img/fond_marry.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    max-width: auto;
    height: auto;
    
}

section body code :

.section2{
    font-family: Sunday, sans-serif;
    margin: 0px;
    padding: 0px;
    background-position: top center;
    background-image: url(../img/fond1.jpg);
    background-color: #555555!important;
    background-repeat: no-repeat;
    background-size: 100%;
    max-width: auto;
    height: auto;
    line-height: 1;
}

Modifié par Efeelios (12 Nov 2019 - 21:24)

C'est pas très clair sans le code html mais cela est probablement dû à la fusion des marges :
https://www.alsacreations.com/article/lire/629-fusion-des-marges.html

Note que ce n'est pas un bug mais pour empêcher la fusion des marges, tu peux utiliser ceci :

.section2{
  overflow:hidden;
}

Pour voir la différence :
https://codepen.io/bacasable/pen/MWWqPZe

PS : !important c'est le mal.

Super les gars le soucis semble réglé et le tuto m'a bien servit. Merci à vous deux !

Le problème c'est que cela empêche ensuite d'utiliser la cascade normalement car une propriété déclarée avec !important aura toujours la priorité quoiqu'on fasse. Par exemple tu ne peux plus faire ceci :

.red.section2{
    background-color: red;
}

A moins d'utiliser ensuite !important pour toutes les propriétés ce qui n'aurait plus vraiment de sens.

bacasable a écrit :
Le problème c'est que cela empêche ensuite d'utiliser la cascade normalement car une propriété déclarée avec !important aura toujours la priorité quoiqu'on fasse. Par exemple tu ne peux plus faire ceci :

.red.section2{
    background-color: red;
}

A moins d'utiliser ensuite !important pour toutes les propriétés ce qui n'aurait plus vraiment de sens.

Ouais ça semblait logique finalement xd .. Ty ^^