如何去除网站右侧的白边距?

我必须用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;
}

还有一些媒体查询不再适合这个身体了......哈哈

谢谢！

简而言之，使用width: 100%替换styles.css中的width: 100vw。

原因：

视区百分比长度相对于初始包含块的大小。当初始包含块的高度或宽度发生更改时，它们会相应地缩放。但是，假定任何滚动条都不存在。

文档：https://drafts.csswg.org/css-values-3/#viewport-relative-lengths

"快速修复">

我快速浏览了一下您的 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-溢出 https://www.w3schools.com/cssref/pr_pos_overflow.asp

你的CSS看起来非常"杂乱"，flexbox至少可以帮助你简化布局。

更改

<div class="container-fluid">

自

<div class="container-fluid px-0">

container-fluid将有填充(15px的左右(，请使用px-0类将其删除

相关内容

最新更新

热门标签：