It seems like my footer is not aligning properly with the full page. https://i.sstatic.net/b6Q2C.png
The body of the site is contained within a class, so the bottom of the footer lines up with the body. However, since it takes up 100% of the screen, it pushes the site to the right by the same amount it was pushed away from the left. I hope that explanation makes sense. Even though I have placed my footer outside of the div class, it still behaves as if it were inside. On the other hand, the nav bar works perfectly and takes up the whole screen. Any ideas? I am quite confused.
This is the code for my footer:
{% 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>
Then, I am using {% include 'footer.html' %} under </script> and inside </body> in my base.html