how do i get rid of the white margin on the right side of my website?
Question
I must develop a website in html voor an exam task. i have been dealing with a white border on the right side of my website page and i don't know what the cause is. I'm also just a beginner so i don't really know where to start looking or what i am doing wrong. though i really don't want to fail this class:-/ If anyone could take a quick look, it would me highly appreciated!
here is my 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>
and this is my 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;
}
there are also some mediaquery's that don't fit in this body anymore... haha
Thank you!
3 answers
solution1
1 2020-05-27 12:16:13
In short, use width: 100% to replace width: 100vw in your styles.css .
Reason:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, any scrollbars are assumed not to exist .
doc: https://drafts.csswg.org/css-values-3/#viewport-relative-lengths
solution2
1 2020-05-27 13:04:00
"Quick Fix"
I took a quick look at your CSS and modified the following properties see if it suffices. It look good to me.
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%;
}
Add these to the end of your CSS file for a "Quick Fix"
I am also learning HTML and CSS, for designing such layouts consider using Flex Box which is good a good learning resource is at this link. https://youtu.be/_vEjcueG3zY
You may also use this book as reference https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189
CSS-Overflow https://www.w3schools.com/cssref/pr_pos_overflow.asp
Your CSS looks very "cluttered" flexbox will help you simplify at-least the layout.
solution3
0 2020-05-27 12:20:06
Change
<div class="container-fluid">
to
<div class="container-fluid px-0">
container-fluid will have padding (left and right of 15px), remove it using px-0 class
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I remove the white margin appearing on the right side of my website?
How do I get rid of white space on the right side?
How to get rid of white space / margin on right side of the page
How do I get rid of the right margin on my div?
How can I get rid of the white space on the right side of page?
How can I get rid of the white space on my website?
How do I get rid of the unwanted white-space on the left and right of my slider?
I can't get rid of right hand side padding/margin
White space on the right side of my site that I can't get rid of
How can I get rid of whitespace on the right side of my page?
Related Tags