I have this piece of code

console.log(document.querySelector('.container').getBoundingClientRect())

* {
  padding: 0;
  margin: 0;
}

main {
  margin: 0 auto;
  margin-top: 200px;
  width: fit-content;
  width: 300px;
  height: 300px;
  background-color: coral;
  border: 20px solid black;
  padding: 20px;
  display: block;
}

.container {
  background-color: cornflowerblue;
  width: 200px;
  height: 200px;
  margin: 0;
}

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

I'm trying to get the bounding rect of the .container I expect to get 200px for both the width and height and values bigger than 8px for the x, y, top, and left.

the blue box is the .container it has a width and height of 200px and its x and y from the top left of the viewport should be much greater than 8px.

as I understand it the bounding rect should

returns a DOMRect providing information about the size of an element and its position relative to the viewport.

the bounding rect I get looks like this

{
  bottom: 8,
  height: 0,
  left: 8,
  right: 950,
  top: 8,
  width: 942,
  x: 8,
  y: 8
}

so why am I getting 8px for the x and why when it's clearly not 8px as the screenshot shows.

Is there something I'm missing about how the getClientBoundingRect function works?