A full screen div inside a container that is not full screen

I have bootstrap container and I need one of the divs inside this container to stretch to full screen and fill it with a gradient

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

I tried it with calc left but it doesn’t work for all screens, sometimes it’s bigger, sometimes it’s smaller

            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100%;
            z-index: 0;
            background: linear-gradient(134deg, #7FA5FF 0%, #D0E6FE 100%);

>Solution :

If you want to have a DIV inside a page-centered .container that extrudes out, touching the window edges, set the width to your child to 100dvw and set the appropriate margin-left using calc(-50dvw + 50%) as:

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 400px;
  margin: 0 auto;
  background: hsla(200 80% 80% / 1);
}

.expanded {
  margin: 0 auto;
  width: 100dvw;
  margin-left: calc(-50dvw + 50%);
  background: linear-gradient(134deg, #7FA5FF 0%, #D0E6FE 100%);
}

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