css - how to set child Div with 100vw of device width when parent div having width :80vw -

.parent {    width: 80vw;    height: 200px;    background-color: red;    margin: 0 auto;    text-align: center;  }    .child {    width: 100vw;    height: 100px;    background-color: blue;  }

<div class="parent">    <div class="child"></div>  </div>

how can align center child div when parent div having lesser width child? how set child div 100vw of device width when parent div having width 80vw?

if you're trying do, center parent, , center child using position relative, , negative left value.

.parent {    width: 200px;    height: 200px;    background-color: red;    margin: 0 auto; /* center parent in screen */  }    .child {    position: relative;    width: 100vw;    height: 100px;    background-color: blue;    /* center child using negative left */    /* left: calc(50% - 50vw); */    /* or */    left: 50%;    transform: translatex(-50%);  }    body {    margin: 0;  }

<div class="parent">    <div class="child"></div>  </div>