Menu icon Foundation
Rafi Benkual almost 5 years ago

Hi Marc, can you be more specific about your question? Left and right margin for what?

In general:
A row has margin auto:

.row {
  width: 100%;
  margin-left: auto;
  margin-right: auto;

Nested rows have negative margin to compensate for the extra padding in the columns

.row .row {
    width: auto;
    margin-left: -0.9375rem;
    margin-right: -0.9375rem;

and columns have padding:

.columns {
  padding-left: 0.9375rem;
  padding-right: 0.9375rem;

Marc McGee almost 5 years ago

Hi Rafi:

Thank you for responding.

Think I solved this. I was wanting to increase the distance that the text is from the left and right edge of my columns.

Initially I started to modify some of the .columns rules only to realize that it would potentially create issues in other areas of the site.

So I decide to nest my main content section, and then apply a style with increased padding to the outer wrap. This is at least a start. I may need to make use of the visibility classes to remove the xtra padding on smaller screens — or use a media query.

<div class ="row">
<div class="large-12 columns xtraPadding"> <!--OUTER WRAP-->

<div class="row">
<div class="large-9 columns">
MAIN CONTENT
</div>
<div class="large-3 columns">
SIDE BAR
</div>
</div>

</div>
</div>


.extraPadding {
  padding-left: 3em;
  padding-right: 3em;
}