网站有一些尾随 space，或溢出

Question

我正在构建一个结合了 flex 和 grid 的投资组合页面。在页面左侧，有一个大约8像素的小间隙，我的页眉不均匀。我试过做 left: -9px;但它不能解决问题。我试过隐藏溢出，但无法滚动。我也尝试过严格调整布局，但没有改变结果。如何消除左侧的间隙？这被认为是 trailing-space 还是溢出？

* {
  box-sizing: border-box;
}
html {
  margin: 0px;
  height: 100%;
  width: 100%;
}
body {
  background: #3b3832;
  background-size: cover;
  font-family: "Roboto Condensed";
  overflow: visible;
}
main {
  width: 100vw;
}
header {
  position: sticky;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: white;
  opacity: 0.8;
  justify-content: center;
  z-index: 100;
}
.menu-icon {
  display: none;
  cursor: pointer;
}
nav {
  width: 100%;
  background-color: white;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
nav ul li {
  position: relative;
  float: left;
}
nav ul li:hover {
  background-color: gray;
  opacity: 0.6;
  border-radius: 6px;
}
.nav-links {
  list-style: none;
  display: flex;
  flex-direction: row;
}
.nav-links li a {
  display: block;
  font-size: 1.5rem;
  color: black;

  text-decoration: none;
  padding: 20px;
}
#menu-bar {
  display: none;
}
header label {
  font-size: 1.5rem;
  color: black;
  cursor: pointer;
  display: none;
  background-color: white;
  opacity: 0.8;
  padding: 20px;
  float: right;
}
.tool-bar {
  background-color: black;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 2rem;
  z-index: 1;
  text-align: center;
  color: white;
}
.tool-bar ul {
  list-style: none;
}

a {
  text-decoration: none;
}
a:visited {
  color: auto;
}

.tool-bar ul li a:visited {
  text-decoration: none;
  color: white;
}
.blend-text {
  position: absolute;
  left: 10vw;
  right: 10vw;
  padding: 5px;
  text-align: center;
  z-index: 1;
  background-color: white;
  opacity: 0.5;
}
.blend-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90vh;
  z-index: 0;
  font-size: 4ch;
  font-family: "Roboto Condensed";
  font-weight: bold;
  mix-blend-mode: screen;
}
.video-text-blend {
  display: flex;
  flex-direction: row;
  top: 0;
  align-content: center;
  justify-items: center;
  position: absolute;
  width: 100vw;
  height: 90vh;
  z-index: -1;
}
video {
  position: absolute;
  width: 100vw;
  height: 90vh;
  object-fit: cover;
  object-position: center;
}
.grid-container {
  display: grid;
  grid-template: repeat(auto-fit, 3, 1fr) / repeat(auto-fit, 4, 1fr);
  grid-row-gap: 1.5rem;
  grid-column-gap: 2rem;
}
.grid-item {
  background-color: white;
  opacity: 0.5;
  -webkit-box-shadow: 0px 10px 13px -7px #000000,
    10px 7px 1px 0px rgba(199, 184, 177, 0);
  box-shadow: 0px 10px 13px -7px #000000,
    10px 7px 1px 0px rgba(199, 184, 177, 0);
  margin-right: 2rem;
}
.info {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  display: inline-block;
  background-color: white;
  opacity: 0.5;
}

.headshot {
  width: 5rem;
  height: auto;
  margin: 1rem;
}
.skills {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  padding: 1rem;
  text-align: center;
}
.projects {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
  text-align: center;
  padding: 1rem;
}
footer {
  background-color: gray;
  opacity: 1;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 2rem;
  z-index: 2;
  color: white !;
  margin-top: 2rem;
}
footer ul li {
  list-style: none;
}
footer ul li a:visited {
  color: white;
}
@media (max-width: 768px) {
  .info {
    grid-column-end: 4;
  }
}
@media (max-width: 768px) {
  .skills {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
  }
}
@media (max-width: 768px) {
  .projects {
    grid-row-start: 3;
    grid-row-end: 4;
  }
}

@media (max-width: 463px) {
  .nav-bar ul {
    flex-direction: column;
  }
  .nav-bar a {
    height: 48px;
  }
  header label {
    display: initial;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  header .nav-bar {
    position: absolute;
    width: 100vw;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
  }
  header .nav-bar ul {
    width: 100vw;
  }
  #menu-bar:checked ~ .nav-bar {
    display: initial;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"
      rel="stylesheet"
    />
    <title></title>
  </head>
  <body>
    <div class="tool-bar">
      <div class="phone">
        <ul>
          <li><a href="#">ksop12@gmail.com</a></li>
        </ul>
      </div>
    </div>
    <header>
      <input type="checkbox" id="menu-bar" />
      <label for="menu-bar">Menu</label>
      <nav class="nav-bar" id="drobdown-items">
        <ul class="nav-links">
          <li><a href="/index.html">Home</a></li>
          <li><a href="/about.html">About Me</a></li>
          <li><a href="footer">Contact Me</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="video-text-blend">
        <video
          poster="/images/dark_logo_white_background.jpg"
          playsinline
          autoplay
          muted
          loop
        >
        <source src="videos/drone-bw.mp4" type="video/mp4" />
        <source src="/audio/mountain-drone copy.ogg" type="audio/ogg" />
      </div>
      <div class="blend-container">
        <h2 class="blend-text">
          Welcome, I develop websites and web applications
        </h2>
      </div>
      <div class="grid-container">
        <div class="grid-item info">
          <img
            class="headshot"
            src="/images/headshot.jpeg"
            alt="picture of me in the mountains"
          />
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. In repellat
            voluptas incidunt praesentium, aut obcaecati fugiat eligendi
            necessitatibus, architecto molestias amet harum repudiandae quos
            excepturi pariatur alias ex. Dolorem impedit distinctio, ducimus
            voluptates nam blanditiis asperiores reprehenderit velit dolore
            aliquid fugiat! Ad officia ab aliquam, ex maxime suscipit! Facilis
            doloribus maxime enim corporis numquam labore quia qui temporibus
            libero dignissimos.
          </p>
        </div>
        <div class="grid-item skills">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Voluptatibus magni minus voluptas repellendus natus optio hic neque
            ipsa dolor, non iure saepe dolore autem sed provident, minima
            corrupti. Quam quos quia impedit in iure alias esse ratione
            doloremque reiciendis nam. Dolores doloremque consequatur repellat
            cum iusto accusantium modi obcaecati voluptas et dolore numquam
            minima quis dolor suscipit dolorem, reprehenderit alias?
          </p>
        </div>
        <div class="grid-item projects">
          <h1>Header</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
            nam quod, eum veritatis porro, maiores assumenda voluptas labore
            nisi pariatur eveniet possimus cum dolorum molestias corrupti sunt?
            Laborum quia quo nostrum aliquid sunt, sint cum doloremque tenetur,
            debitis labore deserunt magni. Cumque, voluptatibus? Aspernatur
            perferendis obcaecati maiores dolor consectetur nihil.
          </p>
        </div>
      </div>
    </main>
    <footer class="footer-bar">
      <ul>
        <li><a href="#">ksoup12@gmail.com</a></li>
      </ul>
    </footer>
  </body>
</html>

Answer 1

这是你需要的吗？检查片段

我刚刚删除了填充。

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
html {
  margin: 0px;
  height: 100%;
  width: 100%;
}
body {
  background: #3b3832;
  background-size: cover;
  font-family: "Roboto Condensed";
  overflow: visible;
}
main {
  width: 100vw;
}
header {
  position: sticky;
  width: 100vw;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  background-color: white;
  opacity: 0.8;
  justify-content: center;
  z-index: 100;
}
.menu-icon {
  display: none;
  cursor: pointer;
}
nav {
  width: 100%;
  background-color: white;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
nav ul li {
  position: relative;
  float: left;
}
nav ul li:hover {
  background-color: gray;
  opacity: 0.6;
  border-radius: 6px;
}
.nav-links {
  list-style: none;
  display: flex;
  flex-direction: row;
}
.nav-links li a {
  display: block;
  font-size: 1.5rem;
  color: black;

  text-decoration: none;
  padding: 20px;
}
#menu-bar {
  display: none;
}
header label {
  font-size: 1.5rem;
  color: black;
  cursor: pointer;
  display: none;
  background-color: white;
  opacity: 0.8;
  padding: 20px;
  float: right;
}
.tool-bar {
  background-color: black;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 2rem;
  z-index: 1;
  text-align: center;
  color: white;
}
.tool-bar ul {
  list-style: none;
}

a {
  text-decoration: none;
}
a:visited {
  color: auto;
}

.tool-bar ul li a:visited {
  text-decoration: none;
  color: white;
}
.blend-text {
  position: absolute;
  left: 10vw;
  right: 10vw;
  padding: 5px;
  text-align: center;
  z-index: 1;
  background-color: white;
  opacity: 0.5;
}
.blend-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90vh;
  z-index: 0;
  font-size: 4ch;
  font-family: "Roboto Condensed";
  font-weight: bold;
  mix-blend-mode: screen;
}
.video-text-blend {
  display: flex;
  flex-direction: row;
  top: 0;
  align-content: center;
  justify-items: center;
  position: absolute;
  width: 100vw;
  height: 90vh;
  z-index: -1;
}
video {
  position: absolute;
  width: 100vw;
  height: 90vh;
  object-fit: cover;
  object-position: center;
}
.grid-container {
  display: grid;
  grid-template: repeat(auto-fit, 3, 1fr) / repeat(auto-fit, 4, 1fr);
  grid-row-gap: 1.5rem;
  grid-column-gap: 2rem;
}
.grid-item {
  background-color: white;
  opacity: 0.5;
  -webkit-box-shadow: 0px 10px 13px -7px #000000,
    10px 7px 1px 0px rgba(199, 184, 177, 0);
  box-shadow: 0px 10px 13px -7px #000000,
    10px 7px 1px 0px rgba(199, 184, 177, 0);
  margin-right: 2rem;
}
.info {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  display: inline-block;
  background-color: white;
  opacity: 0.5;
}

.headshot {
  width: 5rem;
  height: auto;
  margin: 1rem;
}
.skills {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  padding: 1rem;
  text-align: center;
}
.projects {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 4;
  text-align: center;
  padding: 1rem;
}
footer {
  background-color: gray;
  opacity: 1;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  height: 2rem;
  z-index: 2;
  color: white !;
  margin-top: 2rem;
}
footer ul li {
  list-style: none;
}
footer ul li a:visited {
  color: white;
}
@media (max-width: 768px) {
  .info {
    grid-column-end: 4;
  }
}
@media (max-width: 768px) {
  .skills {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
  }
}
@media (max-width: 768px) {
  .projects {
    grid-row-start: 3;
    grid-row-end: 4;
  }
}

@media (max-width: 463px) {
  .nav-bar ul {
    flex-direction: column;
  }
  .nav-bar a {
    height: 48px;
  }
  header label {
    display: initial;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  header .nav-bar {
    position: absolute;
    width: 100vw;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
  }
  header .nav-bar ul {
    width: 100vw;
  }
  #menu-bar:checked ~ .nav-bar {
    display: initial;
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap"
      rel="stylesheet"
    />
    <title></title>
  </head>
  <body>
    <div class="tool-bar">
      <div class="phone">
        <ul>
          <li><a href="#">ksop12@gmail.com</a></li>
        </ul>
      </div>
    </div>
    <header>
      <input type="checkbox" id="menu-bar" />
      <label for="menu-bar">Menu</label>
      <nav class="nav-bar" id="drobdown-items">
        <ul class="nav-links">
          <li><a href="/index.html">Home</a></li>
          <li><a href="/about.html">About Me</a></li>
          <li><a href="footer">Contact Me</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="video-text-blend">
        <video
          poster="/images/dark_logo_white_background.jpg"
          playsinline
          autoplay
          muted
          loop
        >
        <source src="videos/drone-bw.mp4" type="video/mp4" />
        <source src="/audio/mountain-drone copy.ogg" type="audio/ogg" />
      </div>
      <div class="blend-container">
        <h2 class="blend-text">
          Welcome, I develop websites and web applications
        </h2>
      </div>
      <div class="grid-container">
        <div class="grid-item info">
          <img
            class="headshot"
            src="/images/headshot.jpeg"
            alt="picture of me in the mountains"
          />
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. In repellat
            voluptas incidunt praesentium, aut obcaecati fugiat eligendi
            necessitatibus, architecto molestias amet harum repudiandae quos
            excepturi pariatur alias ex. Dolorem impedit distinctio, ducimus
            voluptates nam blanditiis asperiores reprehenderit velit dolore
            aliquid fugiat! Ad officia ab aliquam, ex maxime suscipit! Facilis
            doloribus maxime enim corporis numquam labore quia qui temporibus
            libero dignissimos.
          </p>
        </div>
        <div class="grid-item skills">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Voluptatibus magni minus voluptas repellendus natus optio hic neque
            ipsa dolor, non iure saepe dolore autem sed provident, minima
            corrupti. Quam quos quia impedit in iure alias esse ratione
            doloremque reiciendis nam. Dolores doloremque consequatur repellat
            cum iusto accusantium modi obcaecati voluptas et dolore numquam
            minima quis dolor suscipit dolorem, reprehenderit alias?
          </p>
        </div>
        <div class="grid-item projects">
          <h1>Header</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
            nam quod, eum veritatis porro, maiores assumenda voluptas labore
            nisi pariatur eveniet possimus cum dolorum molestias corrupti sunt?
            Laborum quia quo nostrum aliquid sunt, sint cum doloremque tenetur,
            debitis labore deserunt magni. Cumque, voluptatibus? Aspernatur
            perferendis obcaecati maiores dolor consectetur nihil.
          </p>
        </div>
      </div>
    </main>
    <footer class="footer-bar">
      <ul>
        <li><a href="#">ksoup12@gmail.com</a></li>
      </ul>
    </footer>
  </body>
</html>

网站有一些尾随 space，或溢出

Website has some trailing space, or overflow

html

css

flexbox

overflow

trailing-whitespace