HTML/CSS - position asolute within block with border 100% width

Question

I have a block position absolutely within its parent. The parent has a border left and right. This causes the absolutely positioned block (which also has borders) to be 2px too small.

What is the best way to go about fixing this?

Goal: I basicly want the two blocks to align. Their borders should basicly look like 1 border. The problem is that even with border-box the child div is smaller and thus doesn't align.

html

<div class="container">
    <div class="diagonal"></div>
</div>

css

* {
  box-sizing: border-box;
}
body {
    background-color:red;
}

    .container {
        width:1170px;
        margin:0 auto;
        margin-top:200px;
        height:700px;
        position:relative;
        z-index:3;
        background-color:white;
        border-style:solid;
        border-color:transparent #D2D8DE #D2D8DE #D2D8DE;
        border-width:0 1px 1px 1px;
    }

    .diagonal {
        width:100%;
        height:400px;
        transform:skewY(-10deg);
        position:absolute;
        top:-200px;
        left:0;
        background-color:white;
        border-style:solid;
        border-color:transparent #D2D8DE;
        border-width:0 1px;
        z-index:-1;
    }

JSFiddle

Answer 1

I think you're looking for this:

* {
  box-sizing: border-box;
}

This property tells the browser to account for any border and padding in the value you specify for width and height

EDIT :

If you want to have different borders for inner and outer div and you want them to align, then set .diagonal{ left:-1px; } where 1px is width of inner div's border. I've changed width and color so that result would be easier to notice. NB: In this case you don't need box-sizing: border-box;

body {
  background-color: red;
}

.container {
  width: 1170px;
  margin: 0 auto;
  margin-top: 200px;
  height: 700px;
  position: relative;
  z-index: 3;
  background-color: white;
  border-style: solid;
  border-color: transparent black black black;
  border-width: 0 3px 3px 3px;
}

.diagonal {
  width: 100%;
  height: 400px;
  transform: skewY(-10deg);
  position: absolute;
  top: -200px;
  left: -3px;
  background-color: white;
  border-style: solid;
  border-color: transparent blue;
  border-width: 0 3px;
  z-index: -1;
}

<div class="container">
  <div class="diagonal"></div>
</div>