Проблема при установке высоты / ширины тела

Question

Я пытаюсь создать обычную страницу HTML, и я установил высоту / ширину тела с помощью Vh и Vw

* {
  padding: 0;
  margin: 0;
}

body {
  height: 100vh;
  width: 100vw;
  background-color: red;
  padding: 0;
  margin: 0;
  overflow: auto;
}

.Top-banner {
  position: absolute;
  top: 0;
  left: 0;
  height: 10%;
  width: 100%;
  background-color: blue;
  box-sizing: border-box;
}

.Ad {
  position: absolute;
  top: 10%;
  left: 0;
  height: 15%;
  width: 100%;
  background-color: purple;
  text-align: center;
  box-sizing: border-box;
}

.Ad .Close-but {
  position: absolute;
  top: 65%;
  left: 5%;
  height: 30%;
  width: 10%;
  background-color: green;
  text-align: center;
}

.Main-content {
  position: absolute;
  top: 25%;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: pink;
  text-align: center;
  box-sizing: border-box;
}

<div class="Top-banner">


</div>

<div class="Ad">
  <button class="Close-but">Close</button>

</div>

<div class="Main-content">


</div>

Проблема в том, что дополнительный контент создается слева, это тело, что я делаю не так? Я не могу разместить демонстрацию jsfiddle, потому что в демонстрации эта проблема не не случилось, я пробовал страницу HTML на других компьютерах и ту же проблему

Answer 1

Не уверен, правильно ли понял ваш вопрос, но если ваша проблема заключается в горизонтальной полосе прокрутки, просто измените overflow: auto; в 'overflow-x: hidden;' если вам не нужна вертикальная прокрутка, сделайте 'overflow: hidden;'

body{
 height: 100vh;
 width: 100vw;
 background-color: red;
 padding: 0;
 margin: 0;
 overflow-x: hidden; //change this
 }