Even White Borders Around all content and content that lines up

Hi There:)

I would be really grateful if anyone can help at all I just cant seem to solve this issue myself:)

I am trying to create even white borders around all of my content across mobile and desktop.

I am really struggling to get this to work, it seems to work on desktop but on mobile the images above the gallery block don't show a border on the left and right, if I try to add this in in (adding border to whole site, adding img padding, adding margins etc) it adds this also onto the gallery block too which means the gallery block has a larger border than the green image above.

To summarise what i am trying to achieve is 

- Even white borders/white space around every image (not doubled up vertically)

- Even gap between images in the gallery block.

- For this to somehow work across both mobile and desktop

- Everything to line up

- I need to duplicate this page and apply it to lots of other pages so im hoping for a solution that could be a site wide change rather than targeting specific sections

I have attached a screen shot to show the issue and what i'm hoping to achieve and the very messy css that i have currently added:)

Thanks in advance for any help:)

the site address is 

https://green-aardvark-exdh.squarespace.com/

the password is - testing123

The page that shows the issue is called - /work5/norlo-border-issue

/*STYLING THE ACTIVE NAV LINKS IN SQUARESPACE 7.1*/

//Mobile active link
:is([aria-current="page"], [aria-current="true"]) .header-menu-nav-item-content {
  background-image: none;
 text-decoration: underline;
  
}


/*---hover effect on portfolio grid---*/

 .grid-item:hover img:hover {
    transform: scale(1.1);
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     transition: all .5s;
}

/*----Desktop Fonts----*/
 
 h1{
     font-size:3em !important;
}
 
 h2{
     font-size:2em !important;
}
 
 h3{
     font-size:5em;
     line-height:1em!important;
}
 
 .header-menu-nav-item a {
     font-size:9vw!important;
     line-height:6vw!important;
}

/*---DESKTOP Project Next Titles and Arrows---*/

 .item-pagination-link .item-pagination-title {
     margin: 0;
     padding: 0;
     line-height: 1;
     font-size:1.5vw!important;
     padding:10px;
}

.item-pagination-link .item-pagination-icon svg {
    width: 15px;
    height: 41px!important;
 
}

 .icon--stroke svg {
     stroke-width: 3px;
     fill: transparent;
}




/*---Mobile Fonts---*/
 
 @media screen and (max-width:767px) {
     h1{
         font-size:1.4em !important;
    }
     h2{
         font-size:1.2em !important;
    }
     h3{
         font-size:2.5em;
         line-height:1em!important;
    }
   
  
    
/*---Mobile Fonts - SECONDARY BUTTON SIZING ON MOBILE---*/

     div.button-block a[class*="secondary sqs-block-button-element"].sqs-block-button-element {
         font-size: 1em !important;
         padding-top: 5px !important;
         padding-bottom: 5px !important;
         padding-left: 2px !important;
         padding-right: 2px !important;
         height: auto !important;
    }
    
/*---Mobile Fonts - HIDE SCROLLING TYPE ON MOBILE---*/
     
     .Marquee-svg{
         display:none;
    }
    
/*---MOBILE Project Next Titles---*/
     
     .item-pagination-link .item-pagination-title {
         margin: 0;
         padding: 0;
         line-height: 3.5vw;
         font-size:3vw!important;
    }
   .item-pagination-link .item-pagination-icon svg {
    width: 15px;
    height: 35px!important;
 
}

 .icon--stroke svg {
     stroke-width: 3px;
     fill: transparent;
}
   
   
}
 .header-menu-nav-item a{
     text-align:left;
}



/*---DELETE if nothing effected????????????????????
 
 [data-section-id="ID_HERE"] {
     min-height:clamp(0px, 56.25vw, 100vh) !important;
}
*/

/*---BURGER MENU---*/

/*---BURGER MENU THICKNESS---*/
 .top-bun, .patty, .bottom-bun {
     height: 5px !important;
}

/*---END BURGER MENU THICKNESS---*/

 div.header-nav-item--active a {
     background-image: none !important;
}
 .header-menu-nav-item a {
     font-size: 10vw;
     line-height:5.5vw;
     font-weight:800!important;
}
 .header-burger {
     display:flex!important
}
 .header--menu-open .header-menu {
    opacity: 1!important;
    visibility: visible!important;
}
 .header-nav, .header-actions {
    visibility:hidden!important
}
/*----END BURGER MENU---*/

Which page are you referring to? I don't see it on homepage

https://green-aardvark-exdh.squarespace.com/