过多的空白

Question

我正在尝试创建一个非常简单的网页作为项目的一部分，但是当我在浏览器（Safari、Chrome 和 Firefox）中查看该页面时，右侧有额外的空白。

我使用了基本的 CSS 重置：

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
}

还要在

1220px

的 body 元素上设置最大宽度

当我检查 DOM 时，body 元素的大小正确为

1220px

，但是当检查根 html 元素时，大小更大。

这是我的 html 和 css

* {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
  border     : none;
  }
body {
  font-family      : Helvetica;
  font-size        : 22px;
  max-width        : 1220px;
  color            : seashell;
  background-color : black;
  opacity          : 0.9;
  text-align       : center;
  }
a {
  color : seashell;
  }
header {
  width           : 100%;
  height          : 69px;
  display         : flex;
  justify-content : space-between;
  align-items     : center;
  border-bottom   : 1px solid seashell;
  }
.logo {
  margin-left : 10px;
  display     : inline-flex;
  }
.logo img {
  height      : 50px;
  }
nav {
  display     : inline-flex;
  }
.top-links {
  list-style      : none;
  display         : flex;
  justify-content : space-evenly;
  width           : 350px;
  }

<!-- Header & Navbar -->
<header>
  <div class="logo">
    <img src="./images/img-tea-cozy-logo.webp" alt="tea cozy logo">
  </div>
  <nav>
    <ul class="top-links">
      <li><a href="#">Mission</a></li>
      <li><a href="#">Featured Tea</a></li>
      <li><a href="#">Locations</a></li>
    </ul>
  </nav>
</header>

Answer 1

尝试将 body 下的边距更改为“margin: 0 auto;” 如果这不起作用，也尝试添加此属性：

html, body {
    width: 100%;
    overflow-x: hidden; 
}

如果这不起作用，请尝试这样做：

html {
  margin: 0;
}

设置最大宽度和最小宽度有时也有帮助。