Hi it’s me again. I have a few questions about CSS.
The first problem is, that there is a little bit of space on the right side of the screen. I checked the width of the body, header and other elements. But I can’t figure out what it is.
Another question. Can someone explain to me when to use 100% and when to use 100vh/vw ?
When I use width: 100vw, I can scroll horizontally, and that’s not what I want.
When using 100% for width, the problem is solved with scrolling horizontally but I can still see some space on the right side. I can see the vertical side of the border from an element.
Left side
Right side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="portfoliowebsite, artwork, horseart, aquarelart,kleurplaten">
<link rel="stylesheet" href="stylesheet1.css">
<title>Portfolio Website</title>
</head>
<body>
<header>
<div id="headerimage"> <img src="https://placehold.co/200x80" alt="Logo van "></div>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Nieuws</a></li>
<li><a href="index.html">Gallerij</a></li>
<li><a href="index.html">Projecten</a></li>
<li><a href="index.html">Activiteiten</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="section1">
<div id="newsbanner">
<!--Afbeelding beslaat volledige pagina met daarin een div met highlights over de laatste nieuwtjes-->
<div id="infotext">
<h1>De laatste nieuws</h1>
<p>Hier komen highlights te staan. De nieuwste nieuwtjes. Daarom is deze pagina heel groot en moet zowel de tekst als de afbeelding aantrekkelijk zijn om over te gaan tot actie.</p>
</div>
</div>
</section>
<section id="section2">
<h2>Wat wil je doen?</h2>
<div>
<div class="poster"></div>
<div class="poster"></div>
<div class="poster"></div>
<div class="poster"></div>
</div>
</section>
<section id="aboutme">
<div id="info">
<img src="https://placehold.co/537x417" alt="Een foto vanr">
<h3>Title</h3>
<p>Informatie over mij. Een korte beschrijving. Als mensen meer over mij willen lezen dan kunnen ze op de link klikken. Deze link heet: "Lees meer"</p>
<a href="">Lees meer</a>
</div>
</section>
<section id="shortgallery">
<div>
<img src="https://placehold.co/300x413" alt="gallery item">
<img src="https://placehold.co/300x413" alt="gallery item">
<img src="https://placehold.co/300x413" alt="gallery item">
<img src="https://placehold.co/300x413" alt="gallery item">
</div>
</section>
</main>
<footer>
<p>Designed by </p>
</footer>
</body>
</html>
/*START body*/
body {
background-color: rgb(240, 238, 231);
font-family: Arial, Helvetica, sans-serif;
width: 100%;
margin: 0;
}
/*END body*/
/*START header*/
header {
}
header img {
}
#headerimage {
border: solid;
display: flex;
justify-content: center;
margin-top: 10px;
}
/*END header*/
/*START navbar*/
nav {
background-color: rgb(58, 65, 95);
}
nav a {
text-decoration: none;
color: rgb(163, 169, 197);
transition: color 0.5s;
}
nav a:hover {
color:white;
}
nav li {
list-style-type: none;
margin-right: 50px;
margin-left: 50px;
font-size: 30px;
transition: background-color 0.5s, transform 1s;
padding: 10px
}
nav li:hover {
background-color: rgb(121, 96, 152);
transform:translateY(-5px);
}
ul {
display: flex;
justify-content: center;
}
/*END navbar*/
/*START frontpage*/
#newsbanner {
border:solid black 1px;
display: flex;
justify-content: flex-start;
margin: auto;
}
#infotext {
border: solid black 1px;
width: 500px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2em;
padding: 10px;
}
#infotext h1 {
margin: 5px;
}
/*END frontpage*/
