Why does footer run over content when switching gallery?

Question

css

Hello, I have connected grid (brickwork) for the gallery. When loading the page, everything works fine, but when I switch between galleries through the filter, the footer runs into the gallery, help me deal with the problem.. Here is the link where this problem was found..

<section class="gallery-section full-width pb_2" style="margin-bottom: 100px;">
    <div class="auto-container">

        <!--Filter-->
        <div class="filters">
            <ul class="filter-tabs style-one clearfix anim-3-all">
                <li class="filter active" data-role="button" data-filter="all">
                    Все<!--                    Все-->
                </li>
                <li class="filter" data-role="button" data-filter=".child">
                    Столы, лавочки<!--                    Столы, лавочки-->
                </li>
            </ul>
        </div>

    </div>

    <div class="images-container">
        <div class="grid-row">
            <!-- news -->
            <section id="news" class="filter-list widget news news-4">
                <div class="grid" style="position: relative; height: 1369.08px;">
                    
    
    
            <div class="item image-box mix mix_all child" style="position: absolute; display: inline-block; left: 0px; top: 0px;">
            <div class="inner-box">
                <div class="event">
                    <div class="event-thumb" style="position: unset;">
                                                    <figure class="image"><a href="/uploads/all/53" class="lightbox-image"><img src="/uploads/all/53" alt="Лавочка №1"></a></figure>
                            <a href="/uploads/all/53" class="lightbox-image btn-zoom" title="Лавочка №1 <br /> "><span class="icon fa fa-dot-circle-o"></span></a>
                                                <ul class="event-date">
                            <li class="date"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
                </div>
            </section>

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

.gallery-section {
    /* position: relative; */
    background: #ffffff;
    padding: 70px 0px 50px;
}

.gallery-section .images-container {
    position: relative;
}

.footer {
    background-image: url(/armful/img/nebo.jpg);
}

/**/
/* on resize event */
/**/
$(window).resize(function()
{
  /**/
  /* news */
  /**/
  $('#news .grid').isotope({
    masonry: {columnWidth: $('#news .item').outerWidth()}
  });
});

/**/
/* on load event */
/**/
$(function()
{
  /**/
  /* news */
  /**/
  var $container = $('#news .grid').isotope({
    itemSelector : '.item',
    masonry: {columnWidth: $('#news .item').outerWidth()}
  });

  // // Layout Isotope againe after all images have loaded
  $container.imagesLoaded(function(){
    $container.isotope();
  })
  $('#news').on('click', '.more', function()
  {
    loader = $(this);
    page = $(this).data('page');
    template = $(this).data('template');

    $.get('ajax/' + template + page + '.html').done(function(data)
    {
      $('#news .grid').isotope('insert', $(data));
      loader.data('page', ++page);

      $.get('ajax/' + template + page + '.html').fail(function()
      {
        $('#news .more').addClass('button-disabled');
      });
    }).fail(function()
    {
      $('#news .more').addClass('button-disabled');
    });

    return false;
  });
});

Answer 1

Because gladiolus. The attributes are entered correctly, but disabled by default.
Yes, and in general, the layout is rubbish. Let's remember)
In addition to the basement, I found a few more critical bugs in the header, trouble with the responsive, a bunch of redefinitions only in the gallery, etc. Such a stretch is acceptable for a beginner during the development of a project or when you indulge in your own.
By the way, capitalizing on you is used in personal communication, and not impersonal from the site page. In the basement "Either You Can".