Spacing Between Masonry Bricks in Category Page

By the way, trying to change it using container>separating space, just completely distorts the boxes

Also, if I change my separating space value, it changes how the content inside the masonry is positioned. But I need a certain separating space such that in the actual article post, the breadcrumb is not too close to the header.

Hi there,

try this instead:

1. Customizer > Layout > Container - and set the Padding to 20px all round.
2. Use this for your shadow CSS instead:

.masonry-post .inside-article {
    -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 2px 5px 2px rgba(0,0,0,0.1);
}

Note - Masonry use JS so changes within the Customizer may not reflect the front end until the browser is resized / refreshed.