Question

在我网站首页的右侧有一个白色边框。页面很好，直到我添加了导航栏。我已经尝试了一些我能想到的解决这个问题的方法，但没有运气。谢谢！

＆＃13;

@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;
  }

}

＆＃13;

<!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>

＆＃13;

Answer 1

.video-container左侧和右侧的-8px应该删除

我网站右侧的白色边框

1 个答案: