Fußzeile nicht richtig ausgerichtet

Question

aus irgendeinem Grund scheint meine Fußzeile nicht richtig mit der ganzen Seite auszurichten.

Ich habe den Körper der Website in einer Containerklasse, so dass die Unterseite meiner Fußzeile mit dem Körper der Website ausgerichtet ist. Da es jedoch 100% des Bildschirms einnimmt, schob es die Seite nun um den gleichen Betrag nach rechts, wie es von links weggeschoben wurde. Ich hoffe das ergibt Sinn. Ich habe meine Fußzeile außerhalb der Div-Klasse aber es scheint immer noch so zu tun, als wäre es drin. Meine Navigationsleiste dagegen scheint perfekt zu funktionieren und nimmt den ganzen Bildschirm ein. Irgendwelche Ideen sind sehr verwirrt.

das ist mein Footer Code

{% load staticfiles %} 

<style> 
{% block style %} 
html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 


{% endblock %} 
</style> 

<footer class="footer" > 
     <div class="container-fluid"> 
     <p class="text-muted">Place sticky footer content here.</p> 
     </div> 
</footer> 

und im dann {% include 'footer.html' %} unter </script> und innerhalb </body> in meinem base.html

Answer 1

Da Sie verwenden Position absolute dann müssen Sie setzen left: 0 mit zu überspannen volle Breite der Seite

.footer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    ... 
}