Remove padding on the left and right of a grid system - html

Question

I have a grid system with 10px padding between columns. But i don't want that padding on the left and right side of the whole grid. I have tried putting the columns in a big wrapper and adding margin-left: -10px and margin-right:-10px but it just moves the grid left.
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-2"><div class="inner"></div></div>
<div class="column column-3"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-1"><div class="inner"></div></div>
CSS:
.row,
.column {
box-sizing: border-box;
}
.column {
position: relative;
float: left;
display: inline-block;
}
.column-1 {
width: 33.3333333%;
}
.column-2 {
width: 66.6666666%;
}
.column-3 {
width: 100%;
}
.column {
min-height: 60px;
padding: 10px;
}
.inner {
height: 100px;
width: 100%;
background: black;
display:block;
position: relative;
}
JS Fiddle

Answer 1

I notice you have a .row class defined in your css, but aren't using it.
If you start using it, and embed your columns within a row, you can use :first-child and :last-child selectors to change the margins on the end columns.
Like so
.row .column:first-child {
padding-left: 0;
}
.row .column:last-child {
padding-right: 0;
}
<div class="row">
<div class="column column-1"><div class="inner"></div></div>
<div class="column column-2"><div class="inner"></div></div>
</div>
Fiddle