Flushing images to the edge of page/ section

Hello! I am hoping to achieve this specific look with 4 images flushed to either side of the page and would always stick to the edge of the section while maintaining the responsiveness. I have attached an image for reference (images A,B,C,D) 🙂 I have tried various codes and I am struggling to execute it .... I manage to get the images to sit outside of the grid but never 100% aligned left or right to the edge of the page. Would appreciate some help!! 😅 Thank you 🙂

Website link:

https://olive-fox-cn3g.squarespace.com/home2

24 minutes ago, Ziggy said:

Try this Custom CSS and set the section grid to have 0 gap (in the section settings):

// Full width section
section[data-section-id="66710a7b5efa922a09ca0433"] {
  .fluid-engine {
    --sqs-site-max-width:100vw;
    --sqs-site-gutter:0vw;
  }
}

 

Thank you so much! It worked wonders!! 🙂

4 minutes ago, designedbycarolyn said:

Thank you so much! It worked wonders!! 🙂

Glad to help!