Making both side’s svg width equal to each other

The left side seems shorter than the right.

How would I make both sides equal?

code: https://jsfiddle.net/v7zdbc28/

html {
  height: 100%;
}

body {
  margin: 0;
  background-color: maroon;
  height: 100%;
}

.half {
  height: 100%;
  background-color: red;
  width: 50%;
  background-size: 86.65511265px 100px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1.154"><path d="M1 1.154L0 0.577 1 0" fill="maroon"/></svg>');
  background-repeat: repeat-y;
  background-position: 100% 0;
}

<div class="half"></div>

The light red points reach half way. To make it look half and half the light red must extend further.