html - 为页脚设置与正文相同的边距

Question

我有一个页脚，分为两列，一列在左边，一列在右边。

但我想设置边距，以便页脚的内容与正文(与您在那里看到的图像)对齐。

I've used Bootstrap4 tags (container) for the body but it is not working for the footer.

我期待复制这个:

密码本

https://codepen.io/anon/pen/vwMowX

页脚:

<!-- /* NEW FOOTER */ -->

{% load staticfiles %}

<style>
    ul > li {
        display: inline-block;
        /* You can also add some margins here to make it look prettier */
        zoom:1;
        *display:inline;
        /* this fix is needed for IE7- */
    }
</style>

<div class="container-fluid">
<div id="footer-navbar" class="row footer navbar-fixed-bottom padding-top2 padding-bottom2">
        <div class="col-md-6">
            <div class="">

                <nav class="">
                    <div class="mx-auto d-sm-flex d-block flex-sm-nowrap">

                            <ul class="">
                                <li class="">
                                    <a class="" href="{% url 'shop:quienes_somos' %}">¿Quiénes somos?</a>
                                </li>
                                <li class="">
                                    <a class="" href="{% url 'shop:como_comprar' %}">¿Cómo comprar?</a>
                                </li>
                                <li class="">
                                    <a class="" href="{% url 'shop:contactanos' %}">Contáctanos</a>
                                </li>
                            </ul>

                    </div>
                </nav>

                <ul class="left footer-links footer-interact hidden-md-down">
                    <li><a href="https://twitter.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></i></a></li>
                    <li><a href="https://www.instagram.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></i></a></li>
                    <li><a href="https://facebook.com/stickersgallito" rel="nofollow noopener" target="_blank" title="Facebook"><i class="fab fa-facebook-square"></i></i></a></li>
                    <li><a href="https://www.youtube.com/user/stickersgallito" rel="nofollow noopener" target="_blank" title="YouTube"><i class="fab fa-youtube"></i></i></a></li>
                </ul>
            </div>

        </div>

        <div class="col-md-6 text-right">

            <div class="">
                <p><img src="{% static 'img/home/peru-flag.png' %}"
                    width="40px" height="40px">Perú</p>
            </div>

                <div class="right footer-legal">
                        <span>&copy; 2019 StickersGallito</span>
                <a href="/legal/privacy">Privacy</a> &amp; <a href="/legal/terms">Terms</a>

                    </div>

        </div>
</div>
</div>

更新 1

添加容器流体 div 和容器 div 不允许背景全宽。

Answer 1

这对我有用:

https://codepen.io/anon/pen/jooNYJ#anon-login

我所做的所有更改都在前 2 个 div

它们应该看起来像:

<div id="footer-navbar">
  <div class="container row footer navbar-fixed-bottom padding-top2 my-0 mx-auto padding-bottom2">
    ***content***
  </div>
</div>