网站边缘和页脚之间的空间

Question

我似乎无法在我的页脚和网站之间删除这个小空间。仅当屏幕的大小小于宽度：500px;。

https://i.stack.imgur.com/qrljx.jpg

<footer class="footer">
            <div class="left-side">
                <div>
                    <a href="#">Back to top</a>
                </div>
                <p>Loo Inc &copy; 2016</p>
            </div>
            <div class="middle">
                <div>
                    <h3>Social Media</h3>
                    <img src="images/icons/facebook.png" alt="facebook social media icon"> <a href="https://www.facebook.com/TheLooApp/" target="_blank" alt="link to our facebook profile.">facebook.com </a> <br/>
                    <img src="images/icons/twitter.png" alt="twitter social media icon"> <a href="https://www.twitter.com/TheLooApp" target="_blank" alt="Link to our twitter profile.">twitter.com</a> <br/>
                    <img src="images/icons/instagram.png" alt="instagram social media icon"> <a href="https://www.instagram.com/TheLooApp" target="_blank" alt="Link to our instagram profile.">instagram.com </a> <br/>
                </div>
                <div style="margin-top:20px;">
                    <p>E-mail us at: <a href="mailto:[e-mail]">[e-mail]</a></p>
                </div>
            </div>
            <div class="right-side">
                <p class="our_services">
                    <h3> Payment methods </h3>
                    <img src="images/icons/mc.png" alt="Icon with MasterCard logo. ">
                    <img src="images/icons/visa.png" alt="Icon with Visa logo.">
                    <img src="images/icons/paypal.png" alt="Icon with PayPal logo.">
                    <img src="images/icons/vipps.png" alt="Icon with Vipps logo.">
                </p>
            </div>
        </footer>

https://jsfiddle.net/4hxe30er/

Answer 1

很难仅使用HTML结构的一小部分调试代码，但是从JSFiddle中，您应该能够通过删除@media (max-width: 50em) { }中的margin-bottom: 40px;行来解决该差距。