如何去除网站右侧的白边距？
如何去除网站右侧的白边距？
提问于 2020-05-27 19:56:29
我必须开发一个在html语音或考试任务的网站。我一直在处理我的网站页面右侧的白色边框，我不知道原因是什么。我也只是一个初学者，所以我真的不知道从哪里开始寻找，或者我做错了什么。虽然我真的不想这门课不及格：-/如果有人能快速看一眼，我将不胜感激！
下面是我的html：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./firstpage/Css/Styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<title>VintageLight</title>
</head>
<body>
<div class="container-fluid">
<div class="row no-gutters">
<div class="background">
<div class="row image">
<div class="col-12 col-sm-11 col-md-11 col-lg-11">
<div class="row image justify-content-end">
<div class="col-12 col-sm-5 col-md-3 col-lg-3">
<img id="backgroundimage" src="./pics/natalia-y-NMtyjqXdi0k-unsplash.jpg"
alt="background-image">
</div>
</div>
</div>
</div>
</div>
<header>
<div class="topbar">
<div class="row top">
<div class="col-12 col-sm-7 col-md-12 col-lg-11">
<div class="row top justify-content-end">
<div class="col-12 col-sm-6 col-md-7 col-lg-5">
<div class="row justify-content-start align-items-center navigation">
<p class="p1" id="welkom">welkom bij www.VintageLight.com</p>
<p class="p1" id="winkelwagen">Winkelwagen</p>
<i id='user' class="far fa-user"></i>
<i id='shoppingcart' class="fas fa-shopping-cart"></i>
<div class="nav-toggler" onclick="toggleNavigationIcon(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="midheader">
<div class="row mid justify-content-center">
<div class="col-10 col-sm-7 col-md-10 col-lg-10">
<div class="row mid justify-content-center">
<div class="col-8 col-sm-12 col-md-10 col-lg-10 toplogo">
<h1>Vintage<span id="l">L</span>ight</h1>
</div>
<div class="row justify-content-flex-end">
<div class="col-9 col-sm-7 col-md-3 col-lg-2 searchbar">
<input type="text" placeholder="Zoeken" id="searchbar">
<i id="searchicon" class="fas fa-search"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="topselection">
<div class="row bottomhead justify-content-center">
<div class="col-10 col-sm-10 col-md-10 col-lg-10">
<div class="border">
<a class="selectionlink" href="./indexsecond.html">Vloerlampen <span class="arrow"><i
class="fas fa-chevron-down"></i></span> </a>
<a class="selectionlink" href=./indexsecond.html">Tafellampen <span class="arrow"><i
class="fas fa-chevron-down"></i></span></a>
<a class="selectionlink" href="./indexsecond.html">Wandlampen <span class="arrow"><i
class="fas fa-chevron-down"></i></span></a>
<a class="selectionlink" href="./indexsecond.html">Hanglampen <span class="arrow"><i
class="fas fa-chevron-down"></i></span></a>
<a class="selectionlink" href="./indexsecond.html">Buitenlampen <span class="arrow"><i
class="fas fa-chevron-down"></i></span></a>
<a id="sale" href="#">Sale</a>
<a id="klantenservice" href="#">Klantenservice</a>
</div>
</div>
</div>
</div>
</header>
<main class="main">
<section>
<div class="bigselection">
<div class="row containermidselection justify-content-center">
<div class="col-12 col-sm-12 col-md-10 col-lg-10">
<div class="row midselection justify-content-center">
<div class="selectionpicture col-6 col-sm-3 col-md-3 col-lg-3">
<a href="./indexsecond.html"> <img class="picturelink" alt="Vloerlampen"
src="./pics/vera-cho-eFoFASAuSgo-unsplash.jpg"> </a>
<h2><span id="firstspan" class="bold">Lampen</span> </h2>
</div>
<div class="selectionpicture col-6 col-sm-3 col-md-3 col-lg-3">
<a href=./indexsecond.html><img class="picturelink" alt="Vloerlampen"
src="./pics/steve-johnson-SVuSA9HJQ8s-unsplash.jpg"> </a>
<h2><span class="bold">Vloer</span>lampen </h2>
</div>
<div class="selectionpicture col-6 col-sm-3 col-md-3 col-lg-3">
<a href="./indexsecond.html"><img class="picturelink" alt="Vloerlampen"
src="./pics/brina-blum-mNXTZu7AeGA-unsplash.jpg"> </a>
<h2><span class="bold">Tafel</span>lampen </h2>
</div>
<div class="selectionpicture col-6 col-sm-3 col-md-3 col-lg-3">
<a href="./indexsecond.html"><img class="picturelink" alt="Vloerlampen"
src="./pics/arun-anoop-iO-jfSABr08-unsplash.jpg"> </a>
<h2><span class="bold">Wand</span>lampen </h2>
</div>
<div class="selectionpicture col-6 col-sm-3 col-md-3">
<a href=./indexsecond.html"><img class="picturelink" alt="Vloerlampen"
src="./pics/john-salzarulo-d8v7UEoKc5M-unsplash.jpg"> </a>
<h2><span class="bold">Hang</span>lampen </h2>
</div>
<div class="selectionpicture col-6 col-sm-3 col-md-3 col-lg-3">
<a href="./indexsecond.html"><img class="picturelink" alt="Vloerlampen"
src="./pics/armando-castillejos-a1GYyF9mt_8-unsplash.jpg"> </a>
<h2 class='buitenlampen'><span class="bold">Buiten</span>lampen</h2>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="row secondsection justify-content-center align-items-center">
<div class="col-10 col-sm-11 col-md-10 col-lg-10">
<div class="row secondsection justify-content-center">
<div class="col-10 col-sm-10 col-md-8 col-lg-4">
<h3>Waarom VintageLight?</h3>
</div>
</div>
<div class="row secondsection justify-content-center">
<div class="col-12">
<div class="row voordelen justify-content-between">
<div class="links col-12 col-sm-6 col-md-6 col-lg-5">
<div class="row justify-content-around">
<div class="col-4 col-sm-6 col-md-5 col-lg-5 afbeeldinglinks">
<img class="voordelen2" src="./pics/gratis verzending.png"
alt="Gratis verzending">
<p class="p3"> Gratis verzending </p>
</div>
<div class="col-4 col-sm-6 col-md-5 col-lg-5 afbeeldingrechts">
<img class="voordelen2" src="./pics/snelle levering.png"
alt="Snelle levering">
<p class="p3"> Snelle levering </p>
</div>
</div>
</div>
<div class="rechts col-12 col-sm-6 col-md-6 col-lg-5">
<div class="row justify-content-around">
<div class="col-4 col-sm-6 col-md-5 col-lg-5 afbeeldinglinks">
<img class="voordelen2" src="./pics/veilig betalen.png"
alt="Veilig betalen">
<p class="p3"> Veilig betalen </p>
</div>
<div class="col-4 col-sm-6 col-md-5 col-lg-5 afbeeldingrechts">
<img class="voordelen2" src="./pics/geld terug.png"
alt="Geld terug ">
<p class="p3">30 dagen niet goed?<br> <span id="geldterug"> Geld
terug! </span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<div class="row bodem">
<div class="col-12">
<footer>
<div class="row foot justify-content-center">
<div class="col-11 col-sm-10 col-md-10 col-lg-10">
<div class="row foot">
<div class="col-11 col-sm-5 col-md-5 col-lg-5">
<h4 class="overons">OVER ONS</h4>
<p class="p4">Bij VintageLight.com zorgen we voor een zeer uitgebreid
assortiment aan
vintage
verlichting.
Ons motto is 'Lights will guide you home'. Hierdoor willen we accentueren
dat wij
gaan
voor
een knusse stijl, dat gepast is voor ieder thuis. Neem een kijkje door onze
webwinkel!
</p>
<br>
<h4>NIEUWSBRIEF</h4>
<br>
<input id="nieuwsbrief" type="email" placeholder="ENTER YOUR EMAIL">
<i class="chevronright fas fa-chevron-right"></i>
</div>
<div class="col-11 col-sm-4 col-md-4 col-lg-4 informatie">
<h4>INFORMATIE</h4>
<ul>
<li>INFORMATIE</li>
<li>VERZENDING & RETOUR</li>
<li>GARANTIES</li>
<li>SITEMAP</li>
<li>ZOEKTERMEN</li>
<li>ZOEKEN</li>
<li>BESTELLINGEN EN RETOUREN</li>
<li>MAIL ONS</li>
</ul>
</div>
<div class="followus">
<h4 class="social">FOLLOW US</h4>
<br>
<i class="socialmedia fab fa-facebook"></i>
<i class="socialmedia fab fa-instagram"></i>
<i class="socialmedia fab fa-twitter-square"></i>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
</div>
<script src="./firstpage/js/script.js"></script>
</div>
</body>
</html>这是我的css：
/**
* My main CSS file
*/
* {
margin: 0;
padding: 0;
}
.container-fluid {
margin: 0;
padding: 0;
margin-right: 0;
padding-right: 0;
}
body {
background-color: var(--color-white);
}
#backgroundimage {
object-fit: cover;
height: 586px;
width: 100%;
}
.background {
position: absolute;
margin-top: -1%;
width: 100vw;
height: 972px;
background-image: var(--color-gradient);
}
.topbar {
width: 100vw;
height: 36.5px;
background-color: var(--color-topbar);
position: relative;
}
.navigation {
margin-left: 7%;
width: 430px;
margin-top: -1.5px;
}
#welkom {
font-family: Bahnschrift Regular;
font-size: 10.5pt;
margin-left: -12%;
margin-right: 7%;
}
#winkelwagen {
font-family: Bahnschrift Regular;
font-size: 12pt;
color: var(--color-white);
}
.row.top {
height: 36.5px;
}
#user {
padding: 11px 15px 11px;
margin-left: 6%;
margin-right: 5%;
border-left: solid 0.1pt black;
border-right: solid 0.1pt black
}
#shoppingcart {
position: relative;
margin-left: 20px;
height: 16px;
width: 16px;
}
#l {
color: var(--color-white)
}
h1 {
font-family: bahnschrift regular;
font-size: 48pt;
font-weight: 100;
color: var(--color-darkred);
margin-left: -3%
}
.searchbar {
display: flex;
align-items: center;
margin-top: 100px;
justify-content: flex-end;
}
#searchbar {
text-align: center;
outline: none;
height: 33px;
font-family: Calibri light;
font-size: 20pt;
position: absolute;
border: solid 0.2pt var(--color-gray);
border-radius: 3px;
margin-left: -20px;
}
#searchicon {
position: absolute;
margin-left: -25px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
border-left: solid 1pt var(--color-gray);
}
.selectionlink {
justify-content: center;
font-family: Bahnschrift Regular;
text-decoration: none;
color: var(--color-darkred);
padding-right: 3.35%;
font-size: 1.45vw;
font-weight: 600;
}
.topselection {
margin-top: 5%;
width: 100%;
}
.border {
border-bottom: solid 1pt var(--color-gray);
width: 100%;
}
#sale {
position: relative;
color: white;
font-family: Bahnschrift Regular;
font-size: 1.40vw;
text-decoration: none;
}
#klantenservice {
position: relative;
color: var(--color-beige);
text-decoration: none;
padding: 0.30%;
background-color: white;
font-family: Bahnschrift Regular;
font-size: 1.40vw;
margin-left: 2%;
}
.selectionpicture {
width: 100%;
height: 198px;
text-align: center;
margin-right: 20px;
margin-bottom: 45px;
margin-top: 45px;
}
.picturelink {
width: 100%;
height: 100%;
border-radius: 4pt;
object-fit: cover;
}
h2 {
margin-top: -50px;
font-family: acumin-pro, sans-serif;
font-style: normal;
font-weight: 200;
color: white;
font-size: 2.5vw;
}
.bold {
font-family: acumin-pro, sans-serif;
font-style: bold;
color: white;
font-weight: 700;
}
.main {
height: 1300px;
}
h3 {
margin-top: 40vh;
font-family: Bahnschrift Regular;
font-style: bold;
text-align: center;
font-size: 2.5vw;
border-bottom: solid 1pt var(--color-gray);
padding-bottom: 22px;
margin-bottom: 122px;
}
.secondsection{
margin-top: -4vh;
}
.voordelen2 {
width: 100%;
height: 100%;
}
.afbeeldingrechts{
height: 100%;
}
.afbeeldinglinks{
height: 100%;
}
.p2 {
font-family: Bahnschrift Regular;
font-size: 125%;
font-style: bold;
font-weight: 600;
}
.p3 {
font-family: Bahnschrift Regular;
font-size: 100%;
font-style: bold;
font-weight: 800;
}
#geldterug {
font-family: bahnschrift Regular;
font-size: 112%;
font-weight: 100;
}
.rechts {
text-align: center;
}
.links {
text-align: center;
}
footer {
height: 467px;
width: 100vw;
background-color: var(--color-topbar);
position: relative;
}
li {
list-style-type: none;
font-family: calibri regular;
font-size: 16px;
font-weight: 200;
}
h4 {
font-family: Bahnschrift condensed;
font-weight: 500;
font-size: 20px;
margin-bottom: 20px;
margin-top: 50px;
}
.p4 {
font-family: calibri regular;
font-size: 16px;
font-weight: 200;
}
.socialmedia {
font-size: 25px;
}
.followus {
text-align: center;
}
.social {
margin-bottom: -10px;
}
#nieuwsbrief {
background-color: transparent;
height: 31px;
width: 176px;
border: solid 0.2pt black;
outline: none;
position: absolute;
font-family: calibri light;
font-size: 14px;
}
#nieuwsbrief::placeholder {
color: black;
padding-left: 5px;
}
.chevronright {
color: white;
position: relative;
margin-left: 150px;
padding: 7.5px;
background-color: black;
width: 31px;
text-align: center;
}
.nav-toggler {
display: none;
}也有一些媒体查询不再适合这个身体...哈哈
谢谢!
回答 3
Stack Overflow用户
发布于 2020-05-27 20:16:13
简而言之，在您的styles.css中使用width: 100%替换width: 100vw。
原因：
视口百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生更改时，它们会相应地进行缩放。但是，任何滚动条都被假定为不存在。
文档：https://drafts.csswg.org/css-values-3/#viewport-relative-lengths
Stack Overflow用户
发布于 2020-05-27 21:04:01
“快速修复”
我快速查看了一下您的CSS，并修改了以下属性，看看是否足够。在我看来很不错。
body {
background-color: var(--color-white);
margin-left: 5%;
margin-right: 5%;
/*Overflow hiding is a big no-no*/
overflow-x:hidden;
}
.border {
display: flex;
border-bottom: solid 1pt var(--color-gray);
width: 100%;
}
h1 {
font-family: bahnschrift regular;
font-size: 48pt;
font-weight: 100;
color: var(--color-darkred);
}
p{
width: 90%;
}将这些代码添加到CSS文件的末尾，以实现“快速修复”
我也在学习HTML和CSS，为了设计这样的布局，可以考虑使用Flex Box，这是一个很好的学习资源，可以在这个链接中找到。https://youtu.be/_vEjcueG3zY
您也可以使用本书作为参考https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189
CSS-Overflow https://www.w3schools.com/cssref/pr_pos_overflow.asp
你的CSS看起来非常“凌乱”，flexbox将帮助你简化布局。
Stack Overflow用户
发布于 2020-05-27 20:20:06
变化
<div class="container-fluid">至
<div class="container-fluid px-0">container-fluid将有填充(15px的左边和右边)，使用px-0类删除它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62042567
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号