我网站右侧的白色边框
[英]White border on the right side of my website
问题描述
在我网站首页的右侧，有一个白色边框。 在添加导航栏之前，该页面还不错。 我已经尝试了所有可以解决的问题，但是没有运气。 谢谢！
这是我的网站： 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>
1 个解决方案
解决方案1
0 2017-01-19 19:32:16
.video-container的左侧和右侧为-8px，应将其删除
为什么我的网站右侧有一个空白区域？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.