Comment limiter la largeur de mon pied de page

Question

Je veux que la taille de mon pied de page soit la même que ma barre de navigation en haut (avec un peu d'espace dans les coins).

La barre est à l'intérieur d'un conteneur qui a container{margin:auto;} c'est pourquoi il y a un espace blanc dans les coins.

Je ne comprends pas pourquoi le pied de page a pris toute la largeur de l'écran, il est à l'intérieur du même conteneur que la barre sur le dessus.

ici est le pied de page css:

.down{ 
    position: absolute; 
    margin: auto; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: gray; 
    text-align: center; 

} 

Je ne veux pas modifier la marge gauche et à droite, car il ne sera pas plus réactive

Answer 1

Difficile à dire sans le HTML mais essayez d'ajouter la règle suivante au conteneur:

.container { 
    position: relative; 
} 

Le pied de page a une position absolue dessus. En donnant au conteneur une position relative, le pied de page sera positionné par rapport au conteneur à la place du corps.

Cela entraînera le pied de page à ne pas être attaché au bas de la fenêtre, mais au bas du contenu. Donc, en plus, ajoutez une hauteur minimale au conteneur:

.container { 
    min-height: 100vh; 
} 

Answer 2

vous devez mettre votre <div class="down"> à l'intérieur du conteneur

<div class="container"> 
    <nav></nav> 
    <div class="down"> 
    </div> 
    </div> 


.down{ 
    position: absolute; 
    margin: auto; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: gray; 
    text-align: center; 

}