Negative Margin - Not Working

Question

I'd like to know why my code is adding this almost ghost margin of 10px? No matter what I do the .wrapper and everything in it seems to ignore the right -10px of margin???

***I first forgot to mention that the whole thing is border-box

Here's the code:

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.container{
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding: 0 10px;
}

.wrapper{
  width:100%;
  max-width: none;
  margin-left: -10px;
  margin-right: -10px;
}

.col-m1, .col-m2, .col-m3,
.col-m4, .col-m5, .col-m6,
.col-m7, .col-m8, .col-m9,
.col-m10, .col-m11, .col-m12,
.col-l1, .col-l2, .col-l3,
.col-l4, .col-l5, .col-l6,
.col-l7, .col-l8, .col-l9,
.col-l10, .col-l11, .col-l12,
.col-xl1, .col-xl2, .col-xl3,
.col-xl4, .col-xl5, .col-xl6,
.col-xl7, .col-xl8, .col-xl9,
.col-xl10, .col-xl11, .col-xl12 {
  width: 100%;
  position: relative;
  float: left;
  padding:0 10px;
}

@media (min-width: 768px) {
  .container {
    width: 720px;
  }

  .col-m1, .col-l1, .col-xl1 { width: 8.333%; }
  .col-m2, .col-l2, .col-xl2 { width: 16.666%; }
  .col-m3, .col-l3, .col-xl3 { width: 24.999%; }
  .col-m4, .col-l4, .col-xl4 { width: 33.333%; }
  .col-m5, .col-l5, .col-xl5 { width: 41.666%; }
  .col-m6, .col-l6, .col-xl6 { width: 49.999%; }
  .col-m7, .col-l7, .col-xl7 { width: 58.333%; }
  .col-m8, .col-l8, .col-xl8 { width: 66.666%; }
  .col-m9, .col-l9, .col-xl9 { width: 74.999%; }
  .col-m10, .col-l10, .col-xl10 { width: 83.333%; }
  .col-m11, .col-l11, .col-xl11 { width: 91.666%; }
  .col-m12, .col-l12, .col-xl12 { width: 100%; }


  .offset-col-m1 { margin-left: 8.333%; }
  .offset-col-m2 { margin-left: 16.666%; }
  .offset-col-m3 { margin-left: 24.999%; }
  .offset-col-m4 { margin-left: 33.333%; }
  .offset-col-m5 { margin-left: 41.666%; }
  .offset-col-m6 { margin-left: 49.999%; }
  .offset-col-m7 { margin-left: 58.333%; }
  .offset-col-m8 { margin-left: 66.666%; }
  .offset-col-m9 { margin-left: 74.999%; }
  .offset-col-m10 { margin-left: 83.333%; }
  .offset-col-m11 { margin-left: 91.666%; }
}

---

THE HTML

Some HTML markup for the site. This is specifically the image grid on the homepage. But the whole site has this problem.

This is an image of the non-extension/extra margin on the right side. Very annoying and I just don't understand.

Answer 1

Remove width: 100% of the wrapper class.