Div более широкий, чем область просмотра

Question

В настоящее время я кодирую адаптивное меню, используя флажок, и заметил, что когда мое меню появляется после нажатия на значок гамбургера, оно шире, чем область просмотра.Меню имеет фиксированное положение и гибкий дисплей.Я добавил красные рамки вокруг элементов, чтобы показать эту проблему.Вот соответствующий код:

/* General styles */
html, body { height: 100%; }
body {
  font-family: 'Miriam Libre', sans-serif;
}
a {
  color: white;
  text-decoration: none;
  transition: 0.2s;
}
a:hover {
  color: #ea3c53;
}
/* Navigation styles */
nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #222222;
}
.donate {
  position: absolute;
  margin: 21px;
}
nav .brand {
  display: block;
  height: 70px;
  margin: 10px auto;
}
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
nav label {
  position: absolute;
  top: 0;
  right: 0;
  padding: 21px;
  background: #63E2C6;
  cursor: pointer;
  z-index: 2;
}
nav > label > span {
  display: block;
  margin: 4px auto;
  height: 4px;
  width: 25px;
  border-radius: 1px;
  background: #ffffff;
  transition: 0.5s;
}
.menu {
  display: flex;
  position: fixed;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  top: -100vh;
  left: 0;
  height: 100vh;
  width: 100%;
  background: #222;
  list-style-type: none;
  border: 1px solid red;
  transition: top 0.5s cubic-bezier(0.3, 0.1, 0.3, 0.85);
}
.menu li {
  font-size: 30px;
  border: 1px solid red;
}
input[type=checkbox]:checked ~ .menu {
  top: 0;
}

<nav>
    <!-- Top bar -->
    <a href="link" target="_blank" class="donate">Donate</a>
    <img src="media/logo2.png" alt="Logo" class="brand">
    <input type="checkbox" id="nav">
    <label for="nav">
      <span></span>
      <span></span>
      <span></span>
    </label>
    <ul class="menu">
      <li><a href="#home">Home.</a></li>
      <li><a href="#mission">Mission.</a></li>
      <li><a href="#contact">Contact.</a></li>
    </ul>
  </nav>

Итак, мой вопрос: почему это происходит?В конце концов, у меня есть ширина, установленная на 100%, а не 110%.

Answer 1

У вас есть запас по вашему элементу тела. Добавить:

body {
  margin: 0;
}

Существует также поле и отступ по умолчанию для элемента ul, для которого также установлено значение width: 100%;

Я рекомендую проверить все ваши первичные контейнеры, если посмотреть на них в инспекторе браузера, у вас появится дополнительный интервал для элемента, который вы, возможно, не учитываете.