Here is another version of your code: http://codepen.io/Nico_O/pen/nIqwE
The problem you have is, that you use tables for layout. If you would use one more element as a wrapper you could use logical width like 33.333% for a third of a column. Normaly you would want to do something like this:
.row
{
margin-left: -5px;
margin-right: -5px;
}
.column
{
float: left;
padding-left: 2.5px;
padding-right: 2.5px;
}
.column.three
{
width: 33.333%
}
Now you can do something like this:
<div class="row">
<div class="column three">
Content
</div>
<div class="column three">
Content
</div>
<div class="column three">
Content
</div>
</div>
With pretty results. Since your tables are your columns, you can not use padding like this. For this instance, i did this:
.table.tablas50
{
width:calc( 50% - 5px );
}
With this calculation you get rid of the margin left and right for the first and last element.
I deleted the media querys, you will have to addapt that code into them.