Не срабатывает padding сверху. Masonry

Нас последнем экране товаров не получается сделать отступ сверху. Использовал плагин Masonry для адаптивной плитки блоков. Блоки тянуться как нужно, но вылезают за фиксированное меню. Плагин вешает в html свою высоту контейнера. Возможно, это из-за размеров заданной высоты блоков в vh единицах, но, использую проценты, блоки слипаются. В чем может быть проблема и как ее можно решить? Спасибо. Линк

    <div id="products">
    <div class="products__container">
        <div class="products__catalog">
            <div class="products__item products__item--height2">
                <div class="products__item_title-wrapper">
                    <div class="products__item_title_line"></div>
                    <div class="products__item_title">sabre</div>
                    <div class="products__item_title_line"></div>
                </div>
                <div class="products__item_text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, tempore!
                    </p>
                </div>
                <div class="products__item_mask"></div>
                <img src="img/catalog/sabre.png" alt="" class="products__item_bg">
            </div>
            <div class="products__item products__item--width2">
                <div class="products__item_title-wrapper">
                    <div class="products__item_title_line"></div>
                    <div class="products__item_title">dirk</div>
                    <div class="products__item_title_line"></div>
                </div>
                <div class="products__item_text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, tempore!
                    </p>
                </div>
                <div class="products__item_mask"></div>
                <img src="img/catalog/dirk.png" alt="" class="products__item_bg">
            </div>
            <div class="products__item">
                <div class="products__item_title-wrapper">
                    <div class="products__item_title_line"></div>
                    <div class="products__item_title">walking stick</div>
                    <div class="products__item_title_line"></div>
                </div>
                <div class="products__item_text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, tempore!
                    </p>
                </div>
                <div class="products__item_mask"></div>
                <img src="img/catalog/walking_stick.png" alt="" class="products__item_bg">
            </div>
        </div>
    </div>
</div>

CSS

#products {
  height: 100%;
  position: relative;
}
.products__container {
  position: relative;
  padding-left: 20px;
}
.products__container:after {
  content: "";
  display: table;
  clear: both;
}
.products__catalog {
  width: 100%;
}
.products__catalog:after {
  content: "";
  display: table;
  clear: both;
}
.products__item {
  width: calc(25% - 15px);
  height: -moz-calc(33.33vh - 15px);
  height: -webkit-calc(33.33vh - 15px);
  height: calc(33.33vh - 15px);
  display: block;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: 12px;
}
.products__item--height2 {
  height: -moz-calc(66.3333vh - 15px);
  height: -webkit-calc(66.3333vh - 15px);
  height: calc(66.3333vh - 15px);
}
.products__item--width2 {
  width: calc(50% - 15px);
}

JQ

$('.products__catalog').masonry({
  itemSelector: '.products__item',
  gutter: 12,
  percentPosition: true
});