在我网站首页的右侧有一个白色边框。在我添加导航栏之前，页面很好。我已经尝试了我能想到的一切来解决这个问题，但没有运气。谢谢!
这是我的网站:http://al-saba.net/
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400);
* {margin: 0; padding: 0;}
html {
background-color: #C1C1C1;
opacity: .8;
min-height:100%;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: 2000;
}
h1 {
position: absolute;
font-family: 'Passion One';
font-size: 200px;
color: #42E616;
letter-spacing: 1.6rem;
top: calc(58% - 200px);
text-align: center;
text-shadow: 2px 4px 3px rgba(0,0,0,0.6);
opacity: .68;
width: 100%;
z-index: 2001;
}
h2 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 26px;
color: #E1F2C6;
letter-spacing: .4rem ;
top: calc(62% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2002;
}
h3 {
position: absolute;
font-family: 'Open Sans', monospace;
font-size: 24px;
color: #E1F2C6;
letter-spacing: .4rem ;
top: calc(30% - 30px);
text-align: center;
opacity: .68 ;
width: 100%;
z-index: 2003;
}
body {
}
footer {
position: absolute;
bottom: calc(22% - 100px);
right: calc(16% - 125px);
letter-spacing: .6rem;
z-index: 2002;
}
.homepage-hero-module {
border-right: none;
border-left: none;
position: relative;
}
.no-video .video-container video,
.touch .video-container video {
display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
display: block !important;
}
.video-container {
position: relative;
bottom: -8px;
left: -8px;
right: -8px;
top: -8px;
height: 102%;
width: 100%;
overflow: hidden;
background: #000;
}
.video-container .filter {
z-index: 100;
position: absolute;
background: rgba(0, 0, 0, 0.4);
width: 102%;
}
.video-container video {
position: absolute;
z-index: 0;
bottom: 0;
}
.video-container video.fillWidth {
width: 100%;
}
a {text-decoration: none;}
/* This class is added on scroll */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
/* Navigation Settings */
nav {
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: black;
opacity: .8;
font-family: 'open-sans-bold', AvenirNext-Medium, sans-serif;
}
nav:hover {
opacity: .9;
}
nav li {
display: inline-block;
padding: 24px 10px;
}
nav li a:hover {
color: green;
}
nav li a{
color: white;
text-transform: uppercase;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: black;
text-align: center;
}
#screen1 p {
padding-top: 200px;
text-align: center;
}
#screen2 {
background: white;
text-align: center;
}
#screen3 {
background: black;
text-align: center;
}
@media only screen and (max-width: 520px) {
nav li {
padding: 24px 4px;
}
nav li a {
font-size: 14px;
}
}<!DOCTYPE html>
<html>
<head>
<script src = "jquery-3.1.1.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href = "https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel = "stylesheet" href="style.css">
<script src = "script.js"></script>
<meta name = "viewport" content = "width = device-width, initial-scale=1">
<title> AL-SABA.net </title>
</head>
<header>
<h3> Design • Code • Programs </h3>
<h1> Title </h1>
<h2> Personal Website </h2>
</header>
<body>
<link href='http://fonts.googleapis.com/css?family=Varela+Round' rel = 'stylesheet' type = 'text/css'>
<div class = "homepage-hero-module">
<div class = "video-container">
<div class = "filter"></div>
<video autoplay loop class = "fillWidth">
<source src="Hello-World.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
<source src="Love-Coding.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
</div>
</div>
<section id="screen1">
<p>Scroll down</p>
<nav class = "bar">
<ul>
<li class = "bar-home"><a href="#">Home</a></li>
<li class = "bar-about"><a href="#">About</a></li>
<li class = "bar-projects"><a href="#">Projects</a></li>
<li class = "bar-contact"><a href="#">Contact</a></li>
</ul>
</nav>
</section>
<section id="screen2"></section>
<section id="screen3"></section>
<footer>
</footer>
</body>
</html>最佳答案
.video-container 的左边和右边有 -8px 应该被移除
关于html - 我网站右侧的白色边框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41749988/