Мой нижний колонтитул не занимает всю длину страницы - Bootstrap

Question

Я знаю, что вопрос уже задавался несколько раз, но я не нашел никакого решения, подходящего для моего случая, я попытался поместить контейнер-жидкость, как указано в это решение , но это не так кажется, не работает.

Все идет хорошо, но когда я добавляю свой нижний колонтитул, он не занимает всю длину страницы или строки, там есть отступы, вызванные тем из контейнера-жидкости .

Вот изображение, представляющее проблему:

Как видите, границы не завершают полная длина

Вот фотография, когда я удаляю прокладку из контейнера с жидкостью, которая включает в себя все мои основные:

Как вы можете видеть, появляется переполнение-x

Итак, мой вопрос: нужно ли мне беспокоиться о том, чтобы решить проблему с переполнением или поставить нижний колонтитул на всю длину? ? Я не знаю, какой трек мне взять!

Мой HTML нижний колонтитул:

<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

Решение:

Мой нижний колонтитул находился в контейнере с жидкостью, этого было достаточно, чтобы вывести его оттуда и добавить жидкий контейнер в сам мой футер:

<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>

Answer 2

Код задает всю длину нижнего колонтитула страницы

<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 -->