How can I use the +pad method to add padding on a p element without extending it past a certain point? I've tried using +pad, but the p always goes beyond the desired stopping place. Take a look at this screenshot for reference:
The issue arises when the p with a yellow background extends beyond the middle of the 9th column, where the images stop. I want the p to stop there as well, and not extend further. The same problem occurs when using +prefix.
Below is the Susy code I am currently working with:
@import compass;
@import compass/css3;
@import compass/layout;
@import compass/utilities/lists/bullets;
@import susy;
@import normalize;
@import base;
@import media;
/* Susy Settings */
$total-columns : 4;
$column-width : 60px;
$gutter-width : 20px;
$grid-padding : $gutter-width;
$container-style: fluid;
$tablet : 9;
$desktop : 14;
// Override Susy-grid-background to draw out horizontal lines
= susy-grid-background
+grid-background($total-columns, $column-width, $gutter-width, $base-line-height, $gutter-width, $force-fluid: true);
/* -------------------DESKTOP ----------------------------------*/
+at-breakpoint($desktop)
#page
+container
+susy-grid-background;
header
+container
+pull(.3);
position: fixed;
left: 0;
right: 0;
top: 0;
height: 0;
padding-top: 0;
z-index: 3;
h1.logo
+span-columns(2);
font-size: 12px;
// background: green;
+hide-text;
margin-top: 0;
a
svg
+leader(1);
float: right;
width: 97px;
height: 38px;
.pagenav
+span-columns(2);
+leader(.5);
clear: both;
li
margin-bottom: 1em;
float: right;
clear: both;
a
padding: 5px;
.main
+span-columns(12 omega);
z-index: 1;
position: relative;
.image-group-title
+span-columns(10, 14);
padding: 1em;
+pad(1, 0, 10);
+trailer(.5);
img
+span-columns(10, 14);
.img-4-wide
+span-columns(5, 14);
.tile
+isolate-grid(4, 12);
+fluid-ratio(1/1, columns(4,12));
#footer
margin: 0 1em;
height: 80px;