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?


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="" 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.