html - what CSS could cause a page margin to break on bottom / right sides? -

i have html page following css:

html {   margin: 0;   position: fixed;   width: 100%;   height: 100%; } body {   margin: 5rem;   width: 100%;    height: 100%;   position: relative; } 

when inspect body element in chrome, can "see" margin being applied on left , top. bottom , right sides seem forcing off page/layout. causing of inner content (inside body) half cut off it's "off" screen.

additionally, no scroll bars appearing anywhere in layout, despite adding overflow: scroll, not able scroll "hidden" content.

of course there more elements inside of body, layout large/complex reproduce here. things cause layout overflow on right , bottom?

basically unsure why margin visible on top , left, , kind of css should causing this.

edit:: additionally, if change body have margin: 2rem auto, margin visible on "top", not left/bottom/right.

html has position: fixed , same width , height of browser. therefore, when use margins on body top , left margins push it's content down , right out of html. why can't see bottom , right margins.

example

*,*::before,*::after { box-sizing: border-box; }  .html {      position: fixed;      width: 100%;      height: 100%;      background-color: orange;      font-size: 2rem;  }    .body {      position: relative;      width: 100%;      height: 100%;      margin: 5rem;      background-color: #000;      color: #fff;      font-size: 2rem;  }    .body::before,  .body::after {      position: absolute;      border: solid 5px;      font-size: 1rem;  }    .body::before {      content: "body top-margin";      width: 100%;      height: 5rem;      bottom: 100%;      border-top: none;  }    .body::after {      content: "body left-margin";      width: 5rem;      height: 100%;      right: 100%;      border-left: none;  }    p {    position: absolute;    top: 0;    left: 0;    margin: 0;  }

<div class="html"><p>html</p>  <div class="body"><p>body</p></div></div>