Remove padding for first and last column in row

Question

I have a situation where the grid can't have an outside left and right padding.

How to set padding-left:0; for first column in line and set padding-right:0. This should also when screen changes... Or make similar result.

<div class="row line">
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
  <div class="large-2 medium-3 small-4 columns"></div>
</div>

1. line for large screen
2. line for medium screen
3. line for small screen

Yellow space should be with no padding, white spaces has default foundation padding.

Answer 1

One way to achieve this would be to target the first and last columns.

.row.line > .columns:first-child {
  padding-left: 0;
}
.row.line > .columns:last-child {
  padding-right: 0;
}

Another option would be to create a class to apply to the first and last columns.

<div class="row line">
  <div class="large-2 medium-3 small-2 columns column-first"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns"></div>
  <div class="large-2 medium-3 small-2 columns column-last"></div>
</div>

.column-first {
  padding-left: 0;
}
.column-last {
  padding-right: 0;
}