There is some margin to the right of the page, seemingly outside of the body itself (seen from inspecting in browser), which also causes a scrolling bar to appear on the bottom, but i can't understand what causes it.
I linked on both codepen and netlify
Codepen:
https://codepen.io/bladeranner5005/pen/QWObNpZ
Netlify:
https://lucid-kalam-398350.netlify.app
html
<!doctype html>
<html lang="it">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font links-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&family=Libre+Franklin:wght@800&display=swap"
rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Icons links-->
<!--Custom css-->
<link href="css/index-css.css" rel="stylesheet">
<title>Andrea D'Angelo-website</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active nav-link-custom nav-item-spacing" href="index.html">Home</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/curriculum.html">Curriculum</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/portfolio.html">Portfolio</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/contacts.html">Contatti</a>
</div>
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--HOME-Logo animation------------------------------------------------------------------------------------------------>
<section class="screen-height">
<div class="container-fluid h-100 d-inline-block">
<div class="top-logo"></div>
<div class="row d-flex justify-content-center align-items-center" id="animation">
<div class="col-4">
<img src="img/index/home-logo.svg" alt="My logo, which has an animation">
</div>
</div>
</div>
</section>
<!--HOME-Curriculum---------------------------------------------------------------------------------------------------->
<section class="background-black screen-height-curriculum">
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="cur-buffer-top col-1"></div>
</div>
<!--TEXT 1-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Sono un designer</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 2-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza con multipli programmi, sia 2d sia in 3d</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 3-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho lavorato a una grande varietà di progetti, singolarmente e in gruppo</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="cur-buffer-mid 1 col-1"></div>
</div>
<!--TEXT 4-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza di programmazione, con html, CSS e Javascript</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="cur-buffer-mid">
</div>
</div>
</div>
<!--BUTTONS (DARK BACKGROUND)-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/curriculum.html" class="link-btn btn btn-dark w-100">Online<br>curriculum</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/curriculum-pdf.pdf" class="link-btn btn btn-dark w-100">Curriculum<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--HOME-My work------------------------------------------------------------------------------------------------------->
<section>
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-3"></div>
<div class="col-6 text-center">
<h1 class="work-text-title">My work</h1>
</div>
<div class="col-3"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Pastichair/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Pastichair</h2>
</div>
<div class="col-4"></div>
</div>
<!--Pastichair/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Lavoro di design di scenario in cui abbiamo interagito con la
cooperativa torinese Triciclo, dovendo proporre nuovi scenari per migliorare le prestazioni
della cooperativa sia creare un nuovo modello di prodotto che facilmente replicabile dai membri
di Triciclo, in particolare concentrandosi su un tipo di sedia assegnata a inizio progetto.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Beb/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Bella e brava</h2>
</div>
<div class="col-4"></div>
</div>
<!--beb/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Progetto di creazione di un video animato di 45 secondi avente come
protagonista un prodotto di packaging pre selezionato, tramite lo strumento video e le tecniche
di animazione virtuale quali Blender, ambientata in contesto reale o frutto di un’invenzione,
con l’evidenza dei particolari motivi dell’essere ecologicamente sostenibile.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Personal space/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Personal space</h2>
</div>
<div class="col-4"></div>
</div>
<!--Personal space/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Un progetto di social design, ci è stato dato il compito di creare un
ipotetico progetto riguardante un tema sociale circoscritto a Torino. Abbiamo deciso di
dedicarci al tema delle neuro divergenze nelle scuole, in particolare l’autismo. Abbiamo creato
un’attività la quale punta a facilitare l’interazione fra bambini neuro divergenti e non, la
quale poi si sarebbe sviluppata con un’interazione online con i genitori.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</div>
<!--BUTTONS-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/portfolio.html" class="link-btn-light btn btn-light w-100">Online<br>portfolio</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/portfolio-pdf.pdf" class="link-btn-light btn btn-light w-100">Portfolio<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
<!--SPACING 6-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</section>
<!--INFO--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h1 class="work-text-title">Info</h1>
</div>
<div class="col-4"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="info-buffer">
</div>
</div>
<!--Info wrap-->
<div class="row">
<!--DATA-->
<div class="col-12 col-sm-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-sm-2 col-md-3"></div>
<div class="col-8">
<div class="container-fluid0">
<div class="row">
<div class="col-12 text-center">
<h3 class="info-text-title">Andrea Telemaco D'Angelo</h3>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Nazionalità</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Italiana</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Data di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">08/04/2000</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Luogo di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Caserta</p>
</div>
</div>
<div class="row">
<div class="col-4 text-start">
<p class="info-text-red">Email</p>
</div>
<div class="col-8 text-end">
<p class="info-text-normal">emailexemple@gmail</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Telefono</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">0000000000</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--BUTTON-->
<div class="col-12 col-sm-12 col-md-6 container-fluid">
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
</div>
<!--Button wrap end-->
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div class="border-top border-5 border-danger mt-5"></div>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="index.html" class="link-btn-light btn btn-light w-100">Home<br>page</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/curriculum.html" class="link-btn-light btn btn-light w-100">Online<br>curriculum</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div class="row mb-5 mt-5">
<!--ROW 2-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/portfolio.html" class="link-btn-light btn btn-light w-100">Online<br>portfolio</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>
</body>
</html>
CSS
/*ESSENTIAL ----------------------------------------------------------------------------------------------------------*/
/*To stop the navbar from covering content, source: https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page*/
body {
padding-top: 55px;
margin: 0;
}
/*To make internal links selection better:*/
html {
scroll-behavior: smooth;
}
/*Change text size depending on viewport, source: https://css-tricks.com/viewport-sized-typography/ */
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
/*FONTS --------------------------------------------------------------------------------------------------------------*/
/*Tags from google fonts
Josefin sans light:
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
Josefin sans regular:
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
Libre Franklin
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
*/
/*NAVBAR -------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.nav-item-spacing {
margin-left: 30px;
margin-right: 30px;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*Colors --*/
.background-black {
background-color: black;
}
.nav-link-custom {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
font-size: 1vw;
}
/*HOME-Logo animation ------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height {
height: 100vh;
}
.top-logo {
height: 13vh;
}
@media (max-width: 768px) {
.top-logo {
height: 30vh;
}
}
#animation {
animation: animation 2s;
}
@keyframes animation {
from {
transform: translateY(60vh);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 100%;
}
}
/*CURRICULUM ---------------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height-curriculum {
height: 100vh;
}
@media (max-width: 768px) {
.screen-height-curriculum {
height: 110vh;
}
}
.cur-buffer-mid {
height: 10vh;
}
@media (max-width: 768px) {
.cur-buffer-mid {
height: 6vh;
}
}
.cur-buffer-top {
height: 8vh;
}
/*Text --*/
.home-cur-text {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: white;
text-align: center;
}
/*Button --*/
.link-btn {
border-style: solid;
border-width: thick;
border-color: white;
background-color: black;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*MY WORK ------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.work-buffer {
height: 10vh;
}
/*Text --*/
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 36pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
@media (max-width: 768px) {
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 42pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 18pt;
}
}
/*Button --*/
.link-btn-light {
border-style: solid;
border-width: thick;
border-color: black;
background-color: white;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*INFO ---------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.info-buffer {
height: 10vh;
}
.info-buffer-button {
height: 15vh;
}
/*Text --*/
/*
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
*/
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 36pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
@media (max-width: 768px) {
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 18pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 3vmin;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 4vmin;
}
}
I'm not finding the culprit immediately after checking your codepen, but a quick and dirty way to hide any side to side scrolling is by using
body {
overflow-x: hidden;
}