My footer does not take the whole length of the page - Bootstrap

Question

I know that the question has already been asked several times, but I did not find any solution suited to my case, I tried to put a container-fluid as specified on this solution, but it does not seem to work.

Everything is going well, but when I add my footer, it does not take the whole length of the page, or of the row, there are padding caused by that of the container-fluid.

Here is a picture representing the problem :

As you can see, the borders do not complete the entire length

Here is a photo of when I remove the padding from my container-fluid which includes all of my main :

As you can see, a overflow-x appears

So my question is, do I have to worry about fixing the overflow problem, or putting my footer on the whole length ? I don't know which track should I take !

My HTML footer :

<footer id="footer">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="email_newsletter">S'inscrire gratuitement à la Newsletter :</label>
                            <input type="email" id="email_newsletter" class="form-control w-50 email" aria-describedby="email_newsletter_note">
                            <small id="email_newsletter_note" class="form-text text-muted">Nous ne partageons en aucun cas vos informations.</small>
                        </div>
                        <button type="submit" class="btn btn-primary">Valider</button>
                    </form>
                </div>
                <div class="col-md-6">
                    <a href="">Mentions Légales</a>
                </div>
            </div>
        </div>
    </div>
</footer>

Answer 1

The code gives the whole length footer of the page

<footer class="page-footer">

      <!-- Footer Links -->
      <div class="container-fluid">

        <!-- Grid row -->
        <div class="row">

          <!-- Grid column -->
          <div class="col-md-6 mt-md-0 mt-3">

            <!-- Content -->
            <h5 class="text-uppercase">Footer Content</h5>
            <p>Here you can use rows and columns to organize your footer content.</p>

          </div>
          <!-- Grid column -->

          <hr class="clearfix w-100 d-md-none pb-3">

          <!-- Grid column -->
          <div class="col-md-3 mb-md-0 mb-3">

            <!-- Links -->
            <h5 class="text-uppercase">Links</h5>

            <ul class="list-unstyled">
              <li>
                <a href="#!">Link 1</a>
              </li>
              <li>
                <a href="#!">Link 2</a>
              </li>
              <li>
                <a href="#!">Link 3</a>
              </li>
              <li>
                <a href="#!">Link 4</a>
              </li>
            </ul>

          </div>
          <!-- Grid column -->


        </div>
        <!-- Grid row -->

      </div>
      <!-- Footer Links -->

      <!-- Copyright -->
      <div class="footer-copyright text-center py-3">© 2020 Copyright:
        <a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a>
      </div>
      <!-- Copyright -->

    </footer>
    <!-- Footer -->

Answer 2

Solution :

My footer was in a container-fluid, it was enough to bring it out of there and to add a container-fluid to my footer itself :

<footer id="footer" class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <form action="" method="post">
                        <div class="form-group">
                            <label for="email_newsletter">S'inscrire gratuitement à la Newsletter :</label>
                            <input type="email" id="email_newsletter" class="form-control w-50 email" aria-describedby="email_newsletter_note">
                            <small id="email_newsletter_note" class="form-text text-muted">Nous ne partageons en aucun cas vos informations.</small>
                        </div>
                        <button type="submit" class="btn btn-primary">Valider</button>
                    </form>
                </div>
                <div class="col-md-6">
                    <a href="">Mentions Légales</a>
                </div>
            </div>
        </div>
    </div>
</footer>