我正在构建一个组合了flex和grid的公文包页面。在页面的左侧，有一个大约8个像素的小间隙，我的页眉不均匀。我试过做左：-9px；但这并不能解决问题。我试过隐藏溢出，但无法滚动。我也尝试过严格地调整布局，但没有改变结果。我该如何摆脱左侧的缺口？这被认为是尾随空格还是溢出？
* {
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>这就是您需要的吗？检查摘录
我刚去掉衬垫。
* {
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>