【发布时间】：2018-09-13 21:17:04
【问题描述】：
你好 stackoverflow 社区！我现在正在做一个重大项目，遇到了一些困难。我正在尝试使所有内容都适合视口。但是，由于某种原因，它只是比屏幕大一点。屏幕右侧有一点内容，即使我放了谁能帮我知道为什么？
这里是html和css：
/* Whole Page or not one specific section */
main {
text-align: center;
}
body {
width: 100vw;
height: 100%;
margin-left: 0px;
margin-right: 0px;
}
/* Top Bar */
#temp-logo, #donate-top {
display: inline-block;
}
#donate-top {
float: right;
}
.topbar {
display: block;
background-color: black;
color: white;
}
/* Nav Bar */
nav {
text-align: center;
width: 100vw;
}
/* Gallery */
.img {
width: 20vw;
height: 20vw;
}
.desc {
display: inline-block;
position: relative;
margin: 1%;
}
.desc:hover img {
filter: blur(1.5px) brightness(60%);
transition: 0.3s;
box-shadow: 0 0 10px gray;
}
.desc :not(img) {
position: absolute;
top: 37%;
z-index: 1;
text-align: center;
width: 100%;
color: #FFF;
opacity: 0;
transition: 0.3s;
}
.desc:hover :not(img) {
opacity: 1;
}
.img:hover {
transform: scale(1.1);
}<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Conejo Teen Organization</title>
<body>
<!-- Top Bar -->
<div class="topbar">
<!-- Get logo ASAP -->
<p id="temp-logo"><em>Conejo Teen Organization</em></p>
<a id="donate-top" class="donate"><p class="donate-name">Donate</p></a>
</div>
<!-- Nav -->
<nav>
<a id="mission" class="link" href="#">Mission</a>
<a id="about" class="link" href="#">About Us</a>
<a id="donations" class="link" href="#">What We Do</a>
<a id="contact" class="link" href="#">Contact</a>
</nav>
<!-- Main -->
<main>
<!-- First Section -->
<section id="home-screen">
<h1 id="h1">Conejo Teen Organization</h1>
<p id="h1-desc">Helping California teens in need since 2017</p>
<button id="donate-home" class="donate">Donate Now!</button>
</section>
<!-- Our Mission -->
<section id="mission">
<h2 id="mission-h2">Our Mission</h2>
<p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
</section>
<!-- Image Gallery (images of projects) -->
<section id="gallery">
<h2 id="images">Gallery</h2>
<!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
<div class="row1 row">
<!-- Image 1 -->
<div class="desc-1 desc">
<img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 2 -->
<div class="desc desc-2">
<img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
<h3 id="img-desc">Dec My Room</h3>
</div>
<!-- Image 3 -->
<div class="desc desc-1">
<img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
<h3 id="img-desc">Dec My Room</h3>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer>
<p id="copyright">© 2018 Conejo Teen Organization</p>
<p id="my-credit">Created by <a href="#">Jacob Pieczynski</a></p>
</footer>
</body>
</html>【问题讨论】：
-
从
body,nav中删除100vw并尝试
标签： css html width screen viewport