On the right side you can a see few pixels of space:
Does anyone know how to remove it? I think it’s because of animations I have added with “aos” library. I have already had this error without animations, but I fixed it with this code:
*, *::before, *::after {
box-sizing: border-box;
}
This is the link for the code so you can preview the page:
https://jsfiddle.net/5rq8grcL/
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'IBM Plex Sans Condensed', sans-serif;
background-image: url("/assets/images/masaze.jpg");
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
scroll-behavior: smooth;
animation: fadeEffect 1s;
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#navbar-list {
list-style-type: none;
text-align: center;
margin: 0;
overflow: hidden;
background-color: #000;
width: 100%;
opacity: 0.9;
position: fixed;
z-index: 1;
}
#navbar-list li {
text-align: justify;
display: inline;
}
#navbar-list li a {
color: white;
text-decoration: none;
display: inline-block;
}
#navbar-list li a:hover {
color: #a0c2d5;
transition: .5s;
}
.pocetna {
font-size: 1.7rem;
padding: 25px 20px;
float: left;
}
.linkovi {
padding: 35px 20px;
position: relative;
right: 180px;
}
.linkovi:active {
color: black;
background-color: white;
}
#main {
text-align: center;
padding-top: 15%;
}
#main h1 {
font-size: 4.5em;
text-shadow: 1px 1px 1px #000000;
}
#main h3 {
font-size: 17pt;
}
hr {
width: 615px;
opacity: .2;
}
.button {
height: 50px;
font-size: 20px;
margin-top: 20px;
cursor: pointer;
padding: 10px;
outline: none;
text-decoration: none;
border: none;
border-radius: 3%;
}
.button a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #a0c2d5;
transition: .5s;
}
section {
position: relative;
margin-top: -5px;
}
#video {
background-color: rgba(20, 25, 25, 0.5);
min-width: 100%;
min-height: 100%;
margin-top: 580px;
z-index: 0;
position: relative;
}
#section1 {
position: absolute;
background: rgba(0, 0, 0, 0.5);
color: #f1f1f1;
width: 100%;
padding: 200px;
bottom: 0;
left: 0;
}
#section1 h3 {
font-size: 25pt;
}
#section1 p {
font-size: 18pt;
letter-spacing: 1px;
text-shadow: 1px 1px gray;
}
#contact {
background: rgba(0, 0, 0, 0.2);
position: absolute;
width: 100%;
height: 500px;
display: table;
table-layout: fixed;
border-spacing: 10px;
margin-top: 50px;
}
#section2 {
font-size: 25pt;
text-align: center;
background: rgba(0, 0, 0, 0.2);
height: 100%;
background-image: url("/assets/images/masaze.jpg");
}
#section2 h3 {
margin: 0;
padding: 20px 0;
}
.sectionc {
display: table-cell;
}
.sectionc a {
color: black;
text-decoration: none;
padding: 5px;
}
.sectionc a:hover {
transition: 0.5s;
color: #a0c2d5;
}
#map {
width: 700px;
height: 400px;
margin: 50px auto;
}
#section3 {
text-align: center;
font-size: 25pt;
background: rgba(0, 0, 0, 0.5);
background-image: url("/assets/images/proba.jpg");
height: 705px;
}
.kdn {
margin: 0;
padding: 20px;
color: white;
}
#footer {
background-color: black;
color: white;
height: 80px;
}
#footer p {
margin: -5px;
text-align: center;
padding: 30px;
}
#footer p a {
color: white;
text-decoration: none;
padding-left: 10px;
}
#footer p a:hover {
color: #a0c2d5;
transition: .5s;
}
span {
color: black;
transition: 1.5s;
}
span:hover {
color: white;
transition: 1.5s;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Masaže Gligorijević</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="/stylesheets/main.css">
<link rel="icon" href="/assets/images/logo.png">
<link href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous">
<script src="/assets/js/main.js"></script>
</head>
<body>
<nav>
<div id="navbar">
<ul id="navbar-list">
<li>
<a class="pocetna" href="#"><img src="/assets/images/logo icon.ico" width="40" height="30" style="padding-right:10px;">Masaže Gligorijević</a>
</li>
<li class="linkovil"><a class="linkovi" href="#">Početna</a></li>
<li class="linkovil"><a class="linkovi" href="#section1">O nama</a></li>
<li><a class="linkovi m" href="#section2">Kontakt</a></li>
<li><a class="linkovi" href="#section3">Kako do nas</a></li>
</ul>
</div>
</nav>
<header>
<div id="main">
<h1>Masaže Gligorijević</h1>
<h3>Ulaganjem u svoje zdravlje, ulažete u kvalitet sopstvenog života.</h3>
<hr>
<button class="button"><i class="fas fa-play"></i> <a href="#section2">Rezervišite Odmah</a></button>
</div>
</header>
<section>
<video autoplay muted loop id="video">
<source src="/assets/images/klip.mp4" type="video/mp4">
</video>
<div id="section1" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h3>O nama</h3>
<p>
Profesionalni maser i specijalno usavršeni fizioterapeut čija veština pokazuje odlične rezultate kod klijenata. <br><br> Naš salon je opremljen profesionalnom opremom. Masaže se obavljaju na stolovima za masažu.<br><br>Kompletnom uživanju doprinose
prijatni zvuci muzike i mirisi aromatičnih ulja.<br> NAŠI klijenti odlaze uz pravilo: NAKON MASAŽE OPET IMAM OSMEH!
</p>
</div>
</section>
<section id="section2">
<h3>Kontakt</h3>
<div id="contact">
<div id="sectionc" data-aos="fade-right" data-aos-duration="1500" data-aos-easing="linear">
<h4>Zakažite vaš termin već sada!</h4>
<p><i class="fas fa-location-arrow"></i> Adresa: Ljubiše Uroševića 6/21, Jagodina</p>
<p><i class="fas fa-mobile"></i> Tel: 060 078 2880</p>
<p><i class="fas fa-at"></i> Email: [email protected]</a>
</p>
</div>
<div class="sectionc" data-aos="fade-left" data-aos-duration="1500" data-aos-easing="linear">
<h4>Pratite nas na društvenim mrežama!</h4>
<p><i class="fab fa-facebook-f"></i> <a href="https://sr-rs.facebook.com/Masa%C5%BEe-Gligorijevi%C4%87-Profesionalne-masa%C5%BEe-kinesio-taping-i-maderoterapija-1716964535194608/" target="_blank">Facebook</a></p>
<p><i class="fab fa-instagram"></i><a href="https://www.instagram.com/gliga_massage_035/" target="_blank">Instagram</a></p>
</div>
</div>
</section>
<div id="section3" data-aos="fade-right" data-aos-duration="1000" data-aos-easing="linear">
<h3 class="kdn">Kako do nas</h3>
<div id="map">
</div>
</div>
<footer>
<div id="footer">
<p>
© 2018 <span> Đorđe Gligorijević </span> All Rights Reserved
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</p>
</div>
</footer>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAvHllMfDUDEVM_GtdkQ6_hyj4wMJ2vVxM&callback=initMap"></script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
2
Answers
On
#footer p
, removemargin: -5px;
or at least change it tomargin: -5px 0px;
. The negative left and right margins are what’s causing the gap.100% work. Try this