7.1 blog - masonry margin, padding display problem

Site URL: https://tambourine-orca-xhby.squarespace.com/news

I am attempting to style my 7.1 blog summary using a masonry grid and inspired by the old Tudor template.

While I've successfully laid out the elements pretty closely (and even accounted for the mobile nuances, the unfortunate side effect is that all the content blocks are overlapping each other when the page is loaded ...

However, if i make any change to my browser window size, it will re-shuffle the content and render it correctly ...

check out the page here ...

https://tambourine-orca-xhby.squarespace.com/news
password: 1234

I hope I don't have to ditch all the work I put into it?

/* add a little margin to top of section */
.blog-masonry-wrapper {
  margin-top: 50px;
 }

/* display block and positioning for title */
.blog-masonry-wrapper .blog-title {
  background-color:#fff !important;
  padding: 50px 30px 40px 30px;
  margin-top: -40px
}

/* center date element */
.blog-meta-section {
  width:100%;
  text-align:center;
}

/* date element styling */
.blog-masonry-wrapper .blog-date {
  background-color:#000 !important;
  position: fixed;
  z-index: 99;
  width: 80px;
  height: 15px;
  padding: 32.5px 0px;
  margin-top: -51px;
  margin-left: -40px;
  font-family: 'Roboto' !important;
  font-weight: 600 !important;
  font-size:0.8em !important;
  text-align:center;
  color:white !important;
  border-radius: 40px;
}

/* hide secondary meta info */
.blog-masonry-wrapper .blog-author {
  display: none !important;
}

what have I missed?

Thanks in advance!

-lh