Hi folks,

Building a page with a white bg row, a 10-span - 1 push 90d gradient bg col, with a sub-grid that is white. The concept is to create a layer effect with rounded corners.

With no margins or padding on the row, col, or sub-grid, or sub-grid rows, or sub-grid col - only added css is the radius for the corners, an up and down pad of 15px for the first sg-col, and the background-color.

The question - why are the sub-grid rows/columns displaying WIDER than the column that contains them? And how do I get it to display about 15px to 20px narrower on each side than the column that contains the sub-grid?

Sincerely,
Gordon

CSS
body > .row.pricing-table-row {
margin-left: auto;
padding-right: 0;
padding-left: 0;
background-color: #fff;
}
body > .row > [class*='small-'].pricing-table-col {
float: none;
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
border-radius: 11px;
background-image: -webkit-linear-gradient(left, rgba(0, 182, 250, 1) 40%, rgba(0, 96, 144, 1) 100%);
background-image: -moz-linear-gradient(left, rgba(0, 182, 250, 1) 40%, rgba(0, 96, 144, 1) 100%);
background-image: -o-linear-gradient(left, rgba(0, 182, 250, 1) 40%, rgba(0, 96, 144, 1) 100%);
background-image: linear-gradient(90deg, rgba(0, 182, 250, 1) 40%, rgba(0, 96, 144, 1) 100%);
background-attachment: scroll;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
background-repeat: no-repeat;
background-blend-mode: normal;
}
.subgrid > .row > [class*='small-'].pricing-table-sg-col {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: center;
float: none;
padding: 15px 0;

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-orient: horizontal;
-moz-box-direction: normal;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
justify-content: center;
}
.subgrid > .row > [class*='small-'].pricing-table-sg-col-top {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
float: none;
margin-right: 0;
margin-left: 0;
padding-right: 0;
padding-left: 0;
border-width: .0625rem;
border-style: solid;
border-top-left-radius: 11px;
border-top-right-radius: 11px;
background-color: #fff;
}

Gordon, it would be better if you could post your .rsd file so that we can see the problem.

In the 'old days', when we all were using code, it was ok to post the code. If the problem couldn't immediately be spotted, we could copy the code and paste it into our code editor and see what is is.

Now, with the 'non-coding' apps, we may try to replicate the problem by reading the code, but it takes much longer, and besides, you have only posted the css.

Hi Gordon, I found the culprit after all. I had to try to recreate your document, though, so posting the source file would have been time saving.

Check the margins for the subgrid row. Remove the negative margin left and right. Maybe add a bit of positive margin instead.

I have posted my experimental file to CC to let them see. It clearly must be a bug.

Thank you Inger!

Makes sense in retrospect - but never occurred to me that the sub-grid row (with no css / class applied) would have a default negative margin. re: the RSD file - in this case, there are something like 25 pages and over a 100 graphics, it's a bit of a bloated pig to post. In a similar situation I will do a recreate and post that in the future. Thanks again! I was ready to start pulling my hair out and I have even less of that left than my avatar suggests.