My goal is to construct a grid layout utilizing the Susy plugins, but I'm encountering an issue where there is extra space present within it.
$susy: (
gutter-position: after,
container: 1280px,
container-position: center,
columns: 14,
gutters: 0.6,
global-box-sizing: border-box,
last-flow: to,
debug: (image: show),
// debug: (
// image: show,
// color: rgba(#ccc, 0),
// output: background,
// toggle: top right
// ),
use-custom: (
background-image: false,
background-options: false,
box-sizing: false,
clearfix: false,
rem: false
)
);
.region {
@include span(12 of 14);
@include pre(1);
}
The desired width for the region div is precisely 1140px, but upon measurement, I notice that it extends to 1140px with two additional grid spaces visible in the screenshot. How can I eliminate these? https://i.sstatic.net/y4JPq.png
When measuring from the far right to the far left, the grid measures 1140px, however, when starting from the dark pink and ending at the last dark pink edge, it measures around 1112-1113px.