My whole page has weird white spacing on the right side of it and I can't tell where it is coming from. I tried to reset the padding and margin, but clearly it hasn't helped. It's my first time using bootstrap and I am guessing it might be something with it, but I seems like bootstrap by default has nothing like it and all I've used was basically col-x stuff.
style.css
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,700");
html,
body {
height: 100%;
width: 100%;
font-family: "Poppins", sans-serif;
color: #222;
padding: 0;
margin: 0;
}
/*--Navigation--*/
.navbar {
padding: 0.8rem;
}
.navbar-nav li {
padding-right: 20px;
}
.nav-link {
font-size: 1.1em !important;
color: #f7f7f7;
}
.nav-link:hover {
color: #f7f7f7;
}
.bg-blue {
background-color: #12232e;
border-bottom: 3px solid #007cc7;
}
.navbar-brand h1 {
color: #f7f7f7;
}
.navbar-brand h1:hover {
color: #f7f7f7;
text-decoration: none;
}
.navbar .navbar-nav .nav-link {
position: relative;
color: #f7f7f7;
}
.navbar .navbar-nav .nav-link::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background-color: #f7f7f7;
color: #f7f7f7;
width: 0%;
content: "";
height: 3px;
transition: all 0.5s;
}
.navbar .navbar-nav .nav-link:hover::after {
width: 100%;
color: #f7f7f7;
}
.navbar .navbar-nav .nav-link:active {
width: 100%;
color: #f7f7f7;
}
.nav-item {
font-size: 130%;
}
.custom-toggler.navbar-toggler {
border-color: rgb(247, 247, 247);
}
.navButton {
float: right;
width: 45%;
height: 35%;
}
/*--Navigation--*/
/*--Slider--*/
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 10px #000;
}
.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;
}
/*--Slider--*/
/*--Jumbotron/Welcome--*/
.lead {
font-size: 145%;
}
/*--Jumbotron/Welcome--*/
/*--footer--*/
footer {
background-color: #3f3f3f;
color: #d5d5d5;
padding-top: 2rem;
}
hr.light {
border-top: 1px solid #d6d6d6;
width: 75%;
}
/*--footer--*/
/*---Media Queries --*/
@media (max-width: 1162px) {
.carousel-caption h1 {
font-size: 350%;
}
}
@media (max-width: 768px) {
.carousel-caption {
top: 45%;
}
.carousel-caption h1 {
font-size: 250%;
}
.carousel-caption h3 {
font-size: 140%;
font-weight: 500;
padding-bottom: 0.2rem;
}
.carousel-caption .btn {
font-size: 95%;
padding: 8px 14px;
}
.display-4 {
font-size: 200%;
}
.navButton {
float: right;
width: 50%;
}
.navbar-toggler {
float: right;
}
}
@media (max-width: 576px) {
.carousel-caption {
font-size: 70%;
top: 40%;
}
.carousel-caption h1 {
font-size: 150%;
}
.carousel-caption h3 {
font-size: 110%;
font-weight: 500;
padding-bottom: 0.2rem;
}
.carousel-caption .btn {
font-size: 90%;
padding: 4px 8px;
}
.nav-link {
font-size: 60% !important;
}
.navbar-toggler {
float: right;
}
.navButton {
float: none;
width: 100%;
}
}
/*---Firefox Bug Fix --*/
.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease, -webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
position: relative;
width: 100%;
height: 60%;
margin: 0 !important;
}
.fixed-wrap {
clip: rect(0, auto, auto, 0);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#fixed {
background-image: url("img/mac.png");
position: fixed;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center center;
-webkit-transform: translateZ(0);
transform: translateZ(0);
will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
padding: 1rem;
}
/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap
Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/
index.php
<?php
include_once('header.php');
?>
<body>
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
<div class="col-md-4 col-xs-6">
<a class="navbar-brand" href="#">
<h1 class="display-4 d-none d-md-block">Petitions</h1>
</a>
</div>
<div class="col-md-4 col-xs-6">
<button
class="navbar-toggler custom-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-xs-6">
<button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
Влизане
</button>
</div>
</div>
</div>
</nav>
<!-- Navigation -->
<!-- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="parent d-flex justify-content-center">
<img src="img/background.png" />
</div>
<div class="carousel-caption">
<h1 class="display-1">Против неравеноството си?</h1>
<h3>Бъди промяната!</h3>
<button type="button" class="btn btn-primary btn-lg">
Виж петиции
</button>
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background2.png" />
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background3.png" />
</div>
</div>
</div>
</div>
<!--- Image Slider -->
<!--- Modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Влизане</button>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
</div>
</div>
</div>
</div>
<!--- Modal -->
<!--- Register Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<!--- Register Modal -->
<!--- Jumbotron -->
<!--<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">
A web hosting service allows individuals and organizations to make
their website accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"
><button type="button" class="btn btn-outline-secondary btn-lg">
Web Hosting
</button></a
>
</div>
</div>
</div>-->
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Цел на компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Нашата компания е създадена с цел постигане на положителна промяна в
ежедневието и живота на хора, които са част от различни малцинства,
възрастови групи, както и йерархични постове, живота на животни,
както и на всекиго, който е неспособен да се бори за себе си.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6"><hr class="my-4" /></div>
<div class="col-3"></div>
</div>
<!--- Welcome Section #2 -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Повече за компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Ние вярваме, че не само думите, но и делата са важни.
</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<!--- Two Column Section -->
<!--- Fixed background -->
<!--- Emoji Section -->
<!--- Meet the team -->
<!--- Cards -->
<!--- Two Column Section -->
<!--- Connect -->
<!--- Footer -->
<?php
include_once('footer.php');
?>
</body>
</html>
header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Petitions Site</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
footer.php
<footer style="background-color:#12232e;">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/w3newbie.png" />
<hr class="light" />
<p>555-555-5555</p>
<p>[email protected]</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>Monday: 9am - 5pm</p>
<p>Saturday: 10am - 4pm</p>
<p>Sunday: closed</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>555-555-5555</p>
<p>[email protected]</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light" />
<h5>© petitions.bg</h5>
</div>
</div>
</div>
</footer>
I recreated your issue in CodePen and inspected the elements...
That space on the right of your page is created by an element that is wider than all the others.
There is a CSS rule coming from _grid.scss for .row. A simple fix would be to override it with !important as below.
.row{
margin-left: 0 !important;
margin-right: 0 !important;
} <head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Petitions Site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-dark navbar-expand-md bg-blue sticky-top">
<div class="container-fluid">
<div class="row" style="width: 100%; margin-left: 0px; margin-right: 0px; align-items:center;">
<div class="col-md-4 col-xs-6">
<a class="navbar-brand" href="#">
<h1 class="display-4 d-none d-md-block">Petitions</h1>
</a>
</div>
<div class="col-md-4 col-xs-6">
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Начало</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Цел на компанията</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">За компанията</a>
</li>
</ul>
</div>
</div>
<div class="col-md-4 col-xs-6">
<button type="button" data-toggle="modal" data-target="#modalLoginForm" class="btn btn-primary btn-lg navButton">
Влизане
</button>
</div>
</div>
</div>
</nav>
<!-- Navigation -->
<!-- Image Slider -->
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="1"></li>
<li data-target="#slides" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="parent d-flex justify-content-center">
<img src="img/background.png" />
</div>
<div class="carousel-caption">
<h1 class="display-1">Против неравеноството си?</h1>
<h3>Бъди промяната!</h3>
<button type="button" class="btn btn-primary btn-lg">
Виж петиции
</button>
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background2.png" />
</div>
</div>
<div class="carousel-item">
<div class="parent d-flex justify-content-center">
<img src="img/background3.png" />
</div>
</div>
</div>
</div>
<!--- Image Slider -->
<!--- Modal -->
<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="defaultForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="defaultForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="defaultForm-pass">Парола</label>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default">Влизане</button>
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-default" data-toggle="modal" data-target="#modalRegisterForm">Регистрация</button>
</div>
</div>
</div>
</div>
<!--- Modal -->
<!--- Register Modal -->
<div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Sign up</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="orangeForm-name" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-name">Име</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="orangeForm-email" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-email">Имейл</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-lock prefix grey-text"></i>
<input type="password" id="orangeForm-pass" class="form-control validate">
<label data-error="wrong" data-success="right" for="orangeForm-pass">Паорла</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-deep-orange">Sign up</button>
</div>
</div>
</div>
</div>
<!--- Register Modal -->
<!--- Jumbotron -->
<!--<div class="container-fluid">
<div class="row jumbotron">
<div class="col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<p class="lead">
A web hosting service allows individuals and organizations to make
their website accessible via the World Wide Web.
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-2">
<a href="#"
><button type="button" class="btn btn-outline-secondary btn-lg">
Web Hosting
</button></a
>
</div>
</div>
</div>-->
<!--- Welcome Section -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Цел на компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Нашата компания е създадена с цел постигане на положителна промяна в
ежедневието и живота на хора, които са част от различни малцинства,
възрастови групи, както и йерархични постове, живота на животни,
както и на всекиго, който е неспособен да се бори за себе си.
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-3"></div>
<div class="col-6">
<hr class="my-4" />
</div>
<div class="col-3"></div>
</div>
<!--- Welcome Section #2 -->
<div class="container-fluid padding">
<div class="row welcome text-center">
<div class="col-12">
<h1 class="display-4">Повече за компанията</h1>
</div>
<hr />
<div class="col-12">
<p class="lead">
Ние вярваме, че не само думите, но и делата са важни.
</p>
</div>
</div>
</div>
<!--- Three Column Section -->
<!--- Two Column Section -->
<!--- Fixed background -->
<!--- Emoji Section -->
<!--- Meet the team -->
<!--- Cards -->
<!--- Two Column Section -->
<!--- Connect -->
<!--- Footer -->
<footer style="background-color:#12232e;">
<div class="container-fluid">
<div class="row text-center">
<div class="col-md-4">
<img src="img/w3newbie.png" />
<hr class="light" />
<p>555-555-5555</p>
<p>[email protected]</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>Monday: 9am - 5pm</p>
<p>Saturday: 10am - 4pm</p>
<p>Sunday: closed</p>
</div>
<div class="col-md-4">
<hr class="light" />
<h5>Our hours</h5>
<hr class="light" />
<p>555-555-5555</p>
<p>[email protected]</p>
<p>100 street Name</p>
<p>City, State, 0000</p>
</div>
<div class="col-12">
<hr class="light" />
<h5>© petitions.bg</h5>
</div>
</div>
</div>
</footer>
</body>