Susy: Temporarily modify gutter settings using With-Layout - susy

Question

I have two seperate images right next to one another, and I want them to be contiguous. The problem is that I need to move the right-most image over to the left. I could use the size modifiers for the span mixin (narrow | wide ) but that would change the proportions of the two respective images in relation to one antoher.
Instead I need to move the second image in the flow over to the left by temporarily removing the gutter.
I read from his old post here: https://stackoverflow.com/a/13044025 that I can use with-grid-settings, which is now with-layout.
However there doesn't seem to be any documentation on how to accomplish this particular action.
What would be the proper way to execute such a task?
Thanks in advance
--EDIT--
HTML (Simplified)
<main id="grid">
<section id="main_background_container">
<img id="main_side_img"></img>
<div id="main_primary_container"></div>
</section>
</main>
SCSS
#grid{
#include container(8);
#include background-grid;
}
#main_background_container{
#extend %debug;
#include span(8);
height: auto;
float: right;
margin-top:-16px;
}
#main_side_img{
height: 65%;
#include span(1 no gutter);
}
#main_primary_container{
#include span(4 wide);
background-image: url('../images/background-2b.png');
background-position: top;
background-size: cover;
height: 65%;
}

Answer 1

The with-layout mixin accepts any layout definition using a settings-map, or the shorthand syntax, or any combination of the two — similar to other Susy mixins. But I don't think that's what you want. Changing the gutter size actually changes the grid math, and your elements wont align. I think you want something like this (I'm making things up, since I can't see your code):
.left-area {
#include span(3 no-gutter); // remove the gutter here
}
.right-area {
#include span(9 wide); // span across what would have been the gutter
}