Remove padding from first and last elements in a row

Question

Let's assume there is a website with fixed width. I need to place 3 boxes in it with some space (padding) between the boxes. But I don't need padding on the left and right side.

How can I get rid of it? When I set padding-left or padding-right to the corresponding boxes, the boxes don't have the same size (width/height) anymore.

Here is my code:

.wrap {
	margin: 0 auto;
	width: 1024px;
	height: 800px;
	background-color: yellow;
}

.box {
	box-sizing: border-box;
	width:33.3%;
	height: 200px;
	float: left;
	padding: 10px;
}

.box-inner {
	background-color: grey;
	width: 100%;
	height: 100%;
}

<div class="wrap clearfix">
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
	<div class="box"><div class="box-inner"></div></div>
</div>

Answer 1

While all other answers seem to be correct, I would do it using flexbox since it gives you more flexibility on the layout. Flexbox has a special property for that called justify-content and the value you want to assign to it is space-between.

.wrap {  
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      align-content:flex-start;
      margin: 0 auto;
      width: 1024px;
      height: 800px;
      background-color: yellow;
    }

.box {
    box-sizing: border-box;
    width:calc(33.3% - 5px);
    margin-bottom:5px;
    height: 200px;
}

.box-inner {
    background-color: grey;
    width: 100%;
    height: 100%;
}

JSFiddle