How do I make the footer cover the whole width of the screen?

Question

I would like the footer to cover the whole width of the screen. This is how it looks right now:
Footer

I would appreciate help!

  <!-- Footer -->
  <div class="container">
    <footer class="py-5 bg-dark" id="footer">
      <p class="m-0 text-center text-white">&copy; X <script>document.write(new Date().getFullYear());</script>. This website was made with Bootstrap.</p>
    </footer>
  </div>

Answer 1

Just take it out from the .container

<!-- Footer -->    
<footer class="py-5 bg-dark" id="footer">
  <p class="m-0 text-center text-white">&copy; X <script>document.write(new Date().getFullYear());</script>. This website was made with Bootstrap.</p>
</footer>

or if you need .container inside a footer

<footer class="py-5 bg-dark" id="footer">
  <div class="container">
    <p class="m-0 text-center text-white">&copy; X <script>document.write(new Date().getFullYear());</script>. This website was made with Bootstrap.</p>
  </div>
</footer>

Answer 2

You can put that container div tag inside footer

So that all the content of footer will be in container while the footer will be having 100% width

<footer class="py-5 bg-dark" id="footer">
  <div class="container">
    <p class="m-0 text-center text-white">&copy; X <script>
      document.write(new Date().getFullYear());
    </script>. This website was made with Bootstrap.</p>
  </div>
</footer>