Why doesn't the block take up 100% of the width when the page loads?

Question

css

There is a simple preloader, the problem is that when loading a page on a mob. devices, the block occupies more than 100%, which makes it look crooked. This happens in the first seconds of loading after all the block takes 100%. What causes this and how to fix it?

.b-preloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: $white;
  text-align: center;
  overflow: hidden;
  &::before {
    content: 'Загрузка . . .';
    position: absolute;
    z-index: 1001;
    top: calc(50% + 20px);
    left: 0;
    right: 0;
    width: 150px;
    text-align: center;
    margin: auto;
    padding-left: 25px;
    }
  &::after {
    content: '';
    position: absolute;
    z-index: 1001;
    top: calc(50% - 15px);
    left: calc(50% - 15px);
    height: 30px;
    width: 30px;
    border: 5px solid rgba(60, 60, 180, 0.45);
    border-top: 5px solid rgb(60, 60, 180);
    border-radius: 30px;
    animation: rotate 1s infinite linear;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

Answer 1

Try: width: 100vw; height: 100vh; max-width: 100vw max-height:100vh;

Answer 2

not visible in css like this:

margin:0;
padding:0;