行页边距在页面加载时消失

Question

当页面加载我的行之间的页边空白时，消失并且行重叠。当您单击菜单项时，它们将正确显示。 如何从页面加载时纠正这些重叠？

我曾尝试在页面加载时加载不同的数据过滤器，但每个显示的行都重叠。

这是我的投资组合部分的JS：

$('.filters ul li').click(function(){
    $('.filters ul li').removeClass('active');
    $(this).addClass('active');

    var data = $(this).attr('data-filter');
    $grid.isotope({
      filter: data
    })


    });

       if(document.getElementById("portfolio")){
        var $grid = $(".grid").isotope({
          itemSelector: ".all",
            filter: ".web",
          percentPosition: true,
          masonry: {
            columnWidth: ".all",
          }
        })
  };

这是我的HTML：

<section id="portfolio" class="portfolio-area section-gap" 
 id="portfolio">
            <div class="container">
                <div class="row d-flex justify-content- 
  center">
                    <div class="menu-content pb-70 col-lg- 
   8">
                        <div class="title text-center">
                            <h1 class="mb-10">Feature 
     Projects</h1>
                            <p>I enjoyed working on these 
     projects and designing pieces that the clients love.</p>
                        </div>
                    </div>
                </div>


                <div class="filters">
                    <ul>
                        <li class="active" data- 
   filter=".all">All</li>
                        <li data-filter=".web">Web</li>
                        <li data-filter=".print">Print</li>
                        <li data- 
  filter=".interactive">Interactive</li>
                    </ul>
                </div>
                <div class="filters-content grid">
                    <div class="row print all portfolio">

                         <div class="col-lg-7 col-md-7 col-sm-12 
   col-xs-12">
                            <img src="img/Portfolio/SP_ads.jpg" 
   style="width:100%;">
                            </div>
                        <div class="col-lg-5 col-md-5 col-sm-12 
  col-xs-12 portfolio-text textright order-md-first">
                            <h3>Print Advertisements</h3>
                            <p>InDesign</p>
                            <h6>Full&nbsp;page magazine 
  advertisements for a luxury petite athletic 
   fashion&nbsp;scompany.</h6>
                            </div>
                    </div>

这是CSS：

.portfolio-area .filters-content {
  margin-top: 50px;
}

.portfolio-area .filters-content .show {
  opacity: 1;
  visibility: visible;
  transition: all 350ms;
}

.portfolio-area .filters-content .hide {
  opacity: 0;
  visibility: hidden;
  transition: all 350ms;
}

.portfolio-area .filters-content .item {
  text-align: center;
  cursor: pointer;
  margin-bottom: 30px;
}

.portfolio-area .filters-content .item img {
  border-radius: 10px;
}

.portfolio-area .filters-content .p-inner {
  padding: 20px 0px;
  text-align: center;
}

.portfolio-area .filters-content .item .p-inner .cat {
  font-size: 13px;
}

.portfolio-area .filters-content .item img {
  width: 100%;
}



.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.single-portfolio:hover .middle {
  opacity: 1;
}

.text {
  color: white;
  font-size: 25px;
  padding: 16px 32px;
}

.single-portfolio {
  border-radius: 5px;
}

.single-portfolio:hover .thumb .overlay-bg {
  opacity: .6;
}

.thumb {
    height: 339px;
    width: 340px;
    overflow:hidden;
    margin:0;
    border-radius: 5px;
}

.thumb .overlay-bg {
  opacity: 0;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.portfolio-text {
    padding-top: 20%;
    background-color: #000;
    color: #fff;
}

.portfolio-text h3{
    text-transform: uppercase;
    color: #fff;
}

.portfolio-text h6{
    font-weight: 300;
    color: #fff;
    line-height: 1.75!important;
}

.portfolio {
    margin-top: 30px!important;
    margin-bottom: 30px!important; 
    clear: both!important;
}