Unable to get equal spaced margins on a webpage

I have three boxes/containers on a single row of my webpage.

The first box, the blue box is 2px away from the browser edge on the left, while the last box, the purple box is 2px when I inspect element.

However it does not look like this on the web page and looks uneven:

http://jamesbsite-com.stackstaging.com/

I have read all about the box-model but I am still unable to get equal spacing even though I have set a 2px margin on both the left and right.

Please advise as to what is causing this? The .call-outs-container is the parent container and the .call-out is the child and they are being applied to these divs:

.call-outs-container {
  max-width: 2000px;
  margin: 1px 1px 1px 1px
}

.call-out {
  padding: 5px;
  margin-left: 2px;
  margin-top: 40px;
  margin-right: 2px;
  margin-bottom: -5px;
  width: 30%;
  float: left;
}

.call-out:nth-child(1) {
  background-color: #c0dbe2;
}

.call-out:nth-child(2) {
  background-color: #cdf1c3;
}

.call-out:nth-child(3) {
  background-color: #ccb9da;
}

<div class="call-outs-container"><div class="call-out"><h4>Feature1</h4><p> hello</p></div><div class="call-out"><h4>Feature3</h4>
    I am interested in history.</div></div>