Пробел между веб-сайтом краем и нижним колонтитулом

Question

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

http://imgur.com/a/mNhgN

<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:support@company.com">loo@mail.com</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, вы должны быть в состоянии исправить этот пробел путем удаления margin-bottom: 40px; линия внутри @media (max-width: 50em) { }.