HTML links with page not working as expect in responsive mode - html

I'm helping somebody out with a website, I'm by no means an expert. This was a free bootstrap template that I've modified. Everything works perfectly in desktop mode. But when I test (using chrome) the responsive mode the in page links don't work as expected.
To make allowance for the sticky navbar I added a margin to my anchor. I had to use a media query to solve the issue, but it doesn't work with all of my links. The servicing, repairs and care packages work fine, it's the testimonials and contact us, that is causing issues. I've narrowed it down to the section, but can't figure out what is happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="The leader in mobility scooter servicing and repairs in Norfolk and Suffolk. Committed to providing first class customer care, in your own home by friendly staff"/>
<meta name="author" content="CozyApps"/>
<meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"/>
<meta property="og:image" content="http://whitey012001.000webhostapp.com/img/og-img.jpg" />
<!-- <meta property="og:image:secure_url" content="https://whitey012001.000webhostapp.com/img/og-img.jpg" /> -->
<meta property="og:title" content="First for mobility scooter servicing & repairs across Norfolk & Suffolk" />
<meta property="og:description" content="Welcome to Mobility Services Direct, the leader in mobility scooter servicing and repairs across Norfolk and Suffolk. We proudly trade on our reputation and are committed to providing a first class service built around dedicated customer care." />
<meta property="og:image:height" content="300" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://whitey012001.000webhostapp.com" />
<title>Mobility Scooter Servicing & Repair across Norfolk and Suffolk</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png" />
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png" />
<!-- Custom styles for this template -->
<link href="css/landing-page-v2.css" rel="stylesheet">
<script type="application/ld+json">
{
"#context": "https://schema.org",
"#type": "Organization",
"url": "http://whitey012001.000webhostapp.com",
"name": "Mobility Services Direct Ltd.",
"contactPoint": {
"#type": "ContactPoint",
"telephone": "+44-1502-450024",
"contactType": "Customer service"
}
}
</script>
</head>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><i class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use other traditional methods</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section id="testimonials" class=" features-icons bg-light text-center">
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="contact" class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><i class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
Privacy Policy
</li>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function(){
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(img/bg-showcase-Servicing-v2.jpg)");
$("#showcase-repairs").css("background-image", "url(img/bg-showcase-Repairs-v2.jpg)");
$("#showcase-care-package").css("background-image", "url(img/bg-showcase-Care-Package-v2.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
}
}
}
</script>
</body>
</html>
CSS:
/*!
* Start Bootstrap - Landing Page v5.0.7 (https://startbootstrap.com/template-overviews/landing-page)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-landing-page/blob/master/LICENSE)
*/
body{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;
position: relative;
}
h1,h2,h3,h4,h5,h6{
font-family:Lato,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700
}
header.masthead{
position:relative;background-color:#343a40;
background:url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size:cover;
padding-top:8rem;
padding-bottom:8rem;
}
header.masthead .overlay{
position:absolute;background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
header.masthead h1{
font-size:2rem
}
#media (max-width:1200px){
header.masthead{
background:url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size:cover;
}
}
#media (max-width: 991px){
#servicing, #repairs, #care{
margin-top: 200px;
}
}
#media (max-width:490px){
.call-to-action a, .call-to-action i, .call-to-action p{
font-size: 1.2rem !important;
}
}
#media (max-width:390px){
.call-to-action a, .call-to-action i, .call-to-action p
.header a, .header i, .header p{
font-size: 1rem !important;
}
.call-to-action .MSDvan{
max-height: 200px;
}
.logo{
max-height: 130px;
}
}
#media (min-width:768px){
header.masthead{
padding-top:12rem;padding-bottom:12rem
}
header.masthead h1{
font-size:3rem
}
}
.showcase .showcase-text{
padding:3rem
}
.showcase .showcase-img{
min-height:30rem;
background-size:cover;
background-position: center center;
}
#media (min-width:768px){
.showcase .showcase-text{
padding:7rem
}
}
i{
color: #0E3A91;
}
.features-icons{
padding-top:7rem;
padding-bottom:7rem
}
.features-icons .features-icons-item{
max-width:20rem
}
.features-icons .features-icons-item .features-icons-icon{
height:7rem
}
.features-icons .features-icons-item .features-icons-icon i{
font-size:4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i{
font-size:5rem
}
.call-to-action{
position:relative;background-color:#343a40;
background:url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size:cover;
padding-top:7rem;
padding-bottom:7rem
}
.call-to-action .overlay{
position:absolute;
background-color:#212529;
height:100%;
width:100%;
top:0;
left:0;
opacity:.3
}
.call-to-action a, .call-to-action i, .call-to-action p{
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan{
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer{
padding-top:4rem;
padding-bottom:4rem
}
/* Header */
.logo{
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a{
color: #7EA2D3;
text-decoration: none;
}
.header a:hover{
color: red;
}
.header p{
font-size: 1.3em
}
.no-bottom-margin{
margin-bottom: 0;
}
/* Navbar */
.navbar-container{
padding: 0px !important;
}
nav{
background-color: white !important;
}
nav a{
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover{
color: #0E3A91 !important;
}
nav .active, .active a{
color: #0E3A91 !important;
}
.nav-link{
margin-left: 20px;
margin-right: 20px;
}
.link{
margin-top: -50px;
}
.contact-form{
margin: 0 auto;
margin-top:2rem;
max-width: 800px;
}
.btn-primary{
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab{
color: white;
}
.fb-link:hover{
cursor: pointer;
}
.bg-white{
background-color: white;
}
.form-feedback{
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
Hope this all makes sense, and somebody can make sense of it!
Thanks in advance!


Why do we observe this behavior?
the first 3 sections (servicing, repairs & care packages) are inside section and divs and they are used to get some margin on top so that we can see the h2 (which is a child of the ID) on the screen. However, the testimonials & contact us sections are not inside any section and divs; hence, different behaviour.
to see the exact effect, we change one class to see that the spacing is unset now...
#media (max-width: 991px)
#servicing, #repairs, #care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
what this means is that the spans (#servicing, #repairs, #care) are not enough on their own - we see the correct placement of the heading because the image is covering a lot of the portion which the span isn't doing;
How to resolve?
We have to add a span for the link and provide padding as you did for #servicing, #repairs, #care
since the scenario is different for (contact & testimonials) and there is no image to eat up the space, we'd have to add some css - the results for contact and testimonials are different because the hierarchy of elements within these sections is also different.
#media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
Working snippet below:
window.onload = init;
$('#form-result').hide();
$(document).on('click', 'a[href^="#"]', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 500);
});
$(".fb-link").click(function() {
window.location.href = "https://www.facebook.com/MobilityServicesDirect/";
});
$('.navbar-nav>li>a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
// Delay image loading under the page fold
function init() {
$("#showcase-servicing").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-repairs").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
$("#showcase-care-package").css("background-image", "url(https://www.akberiqbal.com/Jumbo.jpg)");
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
body {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
position: relative;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 700
}
header.masthead {
position: relative;
background-color: #343a40;
background: url(../img/masthead-bw-new.jpg) no-repeat center center;
background-size: cover;
padding-top: 8rem;
padding-bottom: 8rem;
}
header.masthead .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
header.masthead h1 {
font-size: 2rem
}
#media (max-width:1200px) {
header.masthead {
background: url(../img/masthead-bw-1200-v2.jpg) no-repeat center center;
background-size: cover;
}
}
#media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
}
}
#media (max-width:490px) {
.call-to-action a,
.call-to-action i,
.call-to-action p {
font-size: 1.2rem !important;
}
}
#media (max-width:390px) {
.call-to-action a,
.call-to-action i,
.call-to-action p .header a,
.header i,
.header p {
font-size: 1rem !important;
}
.call-to-action .MSDvan {
max-height: 200px;
}
.logo {
max-height: 130px;
}
}
#media (min-width:768px) {
header.masthead {
padding-top: 12rem;
padding-bottom: 12rem
}
header.masthead h1 {
font-size: 3rem
}
}
.showcase .showcase-text {
padding: 3rem
}
.showcase .showcase-img {
min-height: 30rem;
background-size: cover;
background-position: center center;
}
#media (min-width:768px) {
.showcase .showcase-text {
padding: 7rem
}
}
i {
color: #0E3A91;
}
.features-icons {
padding-top: 7rem;
padding-bottom: 7rem
}
.features-icons .features-icons-item {
max-width: 20rem
}
.features-icons .features-icons-item .features-icons-icon {
height: 7rem
}
.features-icons .features-icons-item .features-icons-icon i {
font-size: 4.5rem
}
.features-icons .features-icons-item:hover .features-icons-icon i {
font-size: 5rem
}
.call-to-action {
position: relative;
background-color: #343a40;
background: url(../img/Mobility-Scooter_Home-Banner-v2.jpg) no-repeat center center;
background-size: cover;
padding-top: 7rem;
padding-bottom: 7rem
}
.call-to-action .overlay {
position: absolute;
background-color: #212529;
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: .3
}
.call-to-action a,
.call-to-action i,
.call-to-action p {
color: white;
font-size: 1.5rem
}
.call-to-action .MSDvan {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
footer.footer {
padding-top: 4rem;
padding-bottom: 4rem
}
/* Header */
.logo {
padding: 25px;
height: 160px !important;
width: auto !important;
}
.header a {
color: #7EA2D3;
text-decoration: none;
}
.header a:hover {
color: red;
}
.header p {
font-size: 1.3em
}
.no-bottom-margin {
margin-bottom: 0;
}
/* Navbar */
.navbar-container {
padding: 0px !important;
}
nav {
background-color: white !important;
}
nav a {
font-size: 1.3em;
color: #7EA2D3 !important;
}
nav a:hover {
color: #0E3A91 !important;
}
nav .active,
.active a {
color: #0E3A91 !important;
}
.nav-link {
margin-left: 20px;
margin-right: 20px;
}
.link {
margin-top: -50px;
}
.contact-form {
margin: 0 auto;
margin-top: 2rem;
max-width: 800px;
}
.btn-primary {
background-color: #0E3A91;
border-color: #0E3A91;
}
.fab {
color: white;
}
.fb-link:hover {
cursor: pointer;
}
.bg-white {
background-color: white;
}
.form-feedback {
font-weight: bold !important;
font-size: 1.2rem !important;
text-align: left !important;
}
/*
#media (max-width: 991px) {
#servicing,
#repairs,
#care {
margin-top: 200px;
border: 1px dotted blue;
width: 100%;
display: block;
height: 1px;
}
}
*/
#media (max-width: 991px) {
#testimonials,
#contact {
padding-top: 14rem;
width: 100%;
display: block;
visibility: hidden;
}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<body data-spy="scroll" data-target="#menu" data-offset="40">
<!-- Header -->
<div class="container header">
<div class="row">
<div class="col-md text-center">
<img class="logo responsive-img" src="img/MSD_logo_Small.jpg" alt="MSD Logo">
</div>
<div class="col-md align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><a href="mailto:support#mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</a></p>
</div>
</div>
</div>
</div>
<!-- Menu -->
<div class="container-fluid navbar-container sticky-top">
<nav class="navbar navbar-light navbar-expand-lg justify-content-center" id="menu">
<button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-center">
<li class="nav-item">
<a class="nav-link" href="#servicing">Servicing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#repairs">Repairs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#care">Care Package</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
</ul>
</div>
</nav>
</div>
<!-- End of Menu -->
<!-- Masthead -->
<header class="masthead text-white text-center">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h1 class="mb-5">In home mobility scooter repairs from Mobility Services Direct</h1>
</div>
</div>
</div>
</header>
<!-- Icons Grid -->
<span id="about" class="link"></span>
<section class="features-icons bg-light text-center">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-emotsmile m-auto"></i>
</div>
<h3>Why We're Different</h3>
<p class="lead mb-0">Customer care is at the heart of everything we do. You won't want to turn to anybody else!</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-wrench m-auto"></i>
</div>
<h3>What we do</h3>
<p class="lead mb-0">Fast, efficient and friendly… we’re your first choice for mobility scooter servicing and repairs.</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-social-facebook m-auto fb-link"></i>
</div>
<h3>Swift Response</h3>
<p class="lead mb-0">Message us through Facebook Messenger for a swift response, or use other traditional methods</p>
</div>
</div>
</div>
</div>
</section>
<!-- Image Showcases -->
<section class="showcase">
<div class="container-fluid p-0">
<div class="row no-gutters">
<span id="servicing" class="link"></span>
<div id="showcase-servicing" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Servicing</h2>
<p class="lead">Annual servicing is essential in order to help keep your mobility scooter problem-free, safe to drive and running efficiently.</p>
<p class="lead ">Our comprehensive service will typically be carried out at your home or place of work, whichever is most convenient for you.</p>
<p class="lead mb-0">Our experienced engineers will carry out a detailed test and inspection of all major parts and components, including any fine-tuning necessary to keep your scooter running comfortably and safely until the next service is due.</p>
</div>
</div>
<div class="row no-gutters">
<span id="repairs" class="link"></span>
<div id="showcase-repairs" class="col-lg-6 text-white showcase-img"></div>
<div class="col-lg-6 my-auto showcase-text bg-white">
<h2>Repairs</h2>
<p class="lead">Unfortunately, unexpected breakdowns, faults and damage can always occur and our aim is always to get you up and running again in the shortest possible time.</p>
<p class="lead">We know that you rely on your vehicle and will always try to be with you within 24 hours. Our skilled engineers will be able to carry out most repairs on site straight away, getting you mobile again in the quickest time.</p>
<p class="lead mb-0">From faulty lights and tyres, to battery and motor faults, getting you safely mobile again is our number one priority.</p>
</div>
</div>
<div class="row no-gutters">
<span id="care" class="link"></span>
<div id="showcase-care-package" class="col-lg-6 order-lg-2 text-white showcase-img"></div>
<div class="col-lg-6 order-lg-1 my-auto showcase-text bg-white">
<h2>Care packages</h2>
<p class="lead">A mobility vehicle is more than just a mode of transport, it’s a means to independence and a better quality of life.</p>
<p class="lead">Our Care Packages are designed to give our customers peace of mind, knowing that not only will their scooter always be well maintained, but that they won’t be faced with unexpected call-out charges should a problem occur.</p>
<p class="lead mb-0">We don’t just care for mobility scooters, we care for our customers too. Contact us today for more information about our annual Care Packages.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<span id="testimonials" class="link"></span>
<section class=" features-icons bg-light text-center">
<span class="link"></span>
<div class="container">
<h2 class="mb-5">What people are saying...</h2>
<div class="row">
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto"></i>
</div>
<h5>Mr Shaw, Gt Yarmouth</h5>
<p class="font-weight-light mb-0">"The gentlemen from Mobility Services Direct were absolutely wonderful. The arrived on time, work very quickly and efficiently, and did a superb job. Their costs were extremely reasonable and I wouldn't hesitate to recommend them "</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user-female m-auto"></i>
</div>
<h5>Mrs Osbourne. Spixworth</h5>
<p class="font-weight-light mb-0">"Mark and Paul were magnificent, After advising them I couldn't be without my scooter, they arrived the same day and fixed the fault almost immediately. And such a friendly service!"</p>
</div>
</div>
<div class="col-lg-4">
<div class="features-icons-item mx-auto mb-0 mb-lg-3">
<div class="features-icons-icon d-flex">
<i class="icon-user m-auto fb-link"></i>
</div>
<h5>Mr Chester, Lowestoft</h5>
<p class="font-weight-light mb-0">"Mobility Services were excellent. After servicing my scooter, which I have had for five years now, it is now running better than ever. Very friendly and excellent value for money."</p>
</div>
</div>
</div>
</div>
</section>
<!-- Call to Action -->
<span id="contact"></span>
<section class="link call-to-action text-white text-center">
<!-- <span id="contact" class="link"></span>-->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xl-9 mx-auto">
<h2 class="mb-4">Contact us now....</h2>
</div>
</div>
<div class="row">
<div class="col-md text-center align-self-center">
<div class="text-center align-self-center">
<p><i class="fas fa-phone-alt"></i> 01502 450024</p>
<p><i class="fas fa-mobile"></i> 07778 881794</p>
<p class="no-bottom-margin"><a href="mailto:support#mobilityservicedirect.co.uk"><i
class="fas fa-envelope"></i> support#mobilityservicedirect.co.uk</a></p>
</div>
</div>
<div class="col-md align-self-center text-center">
<!-- <img src="img/Van_1-JPG.jpg" alt="MSD Van" class="rounded MSDvan">-->
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="MSD Van" class="rounded MSDvan" data-src="img/Van_1-JPG.jpg">
</div>
</div>
<div class="row form-container">
<div class="col contact-form">
<p>Or enter your details here...</p>
<form class="" id="contact-form" method="post" action="form.php">
<div id="form-result" class="alert"></div>
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="Whats your name?" id="name" name="name">
<div class="form-feedback invalid-feedback">Please enter your name</div>
</div>
<div class="form-group">
<input type="email" class="form-control form-control-lg" placeholder="Please enter your email..." id="email" name="email">
<div class="form-feedback invalid-feedback">Please enter your email or phone number</div>
</div>
<div class="form-group">
<input type="tel" class="form-control form-control-lg" placeholder="Please enter your phone number..." id="phone" name="phone">
<div class="form-feedback invalid-feedback">Please enter your phone number or email</div>
</div>
<div class="form-group">
<textarea class="form-control form-control-lg" placeholder="How can we help?" id="question" name="question" rows="4"></textarea>
<div class="form-feedback invalid-feedback">Please leave us a message</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary btn-lg btn-block btn-form">Submit</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer bg-light">
<div class="container">
<div class="row">
<div class="col-lg-6 h-100 text-center text-lg-left my-auto">
<ul class="list-inline mb-2">
<li class="list-inline-item mr-3">
<button type="button" class="fb-link btn btn-primary">
<i class="fab fa-facebook-f"></i> Follow us</button>
</li>
</ul>
<p class="text-muted small mb-4 mb-lg-0">© Mobile Services Direct 2019. All Rights Reserved.
</p>
</div>
<div class="col-lg-6 h-100 text-center text-lg-right my-auto">
<li class="list-inline-item">
Privacy Policy
</li>
</div>
</div>
</div>
</footer>


sorry , still not work for me,
so i add script to link :
<ul>
<li>Home</li>
<li>Blog</li>
</ul>
<script>
function load(x)
{
window.location.href= x+'.php';
}
</script>

Related

Position image to the right of content using css/bootstrap

I am trying to position an image to the right of the content area as shown in this dribble shot.
https://dribbble.com/shots/15571736-Money-Transfer-Website
Here is what I have so far.
https://codepen.io/pinapelkod/pen/RwLJJNm
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
When I float the image or position using top and left properties, the layout gets distorted.

By updating the bg-image class style I got the following result. If there is a different problem, specify it more clearly.
body {
background-color: white;
color: #1d2331;
}
.bg-image {
float: right !important;
width: 100%;
position: relative;
height: auto;
margin-right: -40% !important;
}
a.nav-link,
a.navbar-brand {
color: #1d2331;
}
a i {
color: #c9327b;
}
form .btn {
background-color: #1d2331;
color: #f3f1fe;
}
.action-call {
min-height: 35vh;
}
.feature {
background-color: #f3f1fe;
min-height: 56vh;
}
.feature .icon-link {
text-decoration: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-md mt-4">
<div class="container-fluid mx-5">
<a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
<div class="vr ms-0"></div>
<div class="dropdown">
<button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
aria-expanded="false"><strong>Personal</strong></button>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link" href="#"><strong>Download</strong></a>
</li>
<li class="nav-item me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
<li class="nav-item me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
</li>
</ul>
<form class="ms-5">
<button class="btn btn-outline-success px-5" type="submit">Login</button>
</form>
</div>
</nav>
</header>
<article class="content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
<section class="mx-5 action-call d-flex align-items-center ">
<div class="container-fluid">
<div class="row t-row">
<h1> <strong>Send money <br>abroad more faster</strong></h1>
<div class="sendnow"></div>
</div>
</div>
</section>
<section class="feature d-flex align-items-center">
<div class="container-fluid">
<div class="mx-5 row b-row">
<div class="d-flex justify-content-start">
<div class="col-3 me-3">
<i class="fs-2 bi bi-shield-shaded"></i>
<h5> <strong>Safety guarantee</strong></h5>
<p>We make sure your money will <br>be safe 100% guarantee</p>
<a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
</a>
</div>
<div class="col-3 me-3">
<i class="fs-2 bi bi-credit-card-2-front-fill"></i>
<h5> <strong>Send money in minutes</strong></h5>
<p>Your money will be sent faster <br>than your blue wallet</p>
<a href="#" class="icon-link"> <strong>Send money now</strong><i
class="bi bi-chevron-right text-primary"></i> </a>
</div>
</div>
</div>
</div>
</section>
</article>

<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>

I restructured the html and added a bootstrap display (d-flex) class as shown below.
Update HTML structure:
<div class="d-flex mt-5">
<div class="col-3 ">
.....
</div>
<div class="col-3">
.....
</div>
<div class="col-6 content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
</div>
</div>
The corresponding CSS:
.content {
position: relative;
}
.bg-image {
position: relative;
top: -310px;
left: 160px;
height: 500px;
}
Link to codepen:
https://codepen.io/pinapelkod/pen/RwLJJNm

Page has weird little white spacing on the right side

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#myemail.com</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#myemail.com</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#myemail.com</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#myemail.com</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>

Page content overlapping navbar

I am having some trouble with some of my bootstrap cards overlapping my navbar. I made sure that none of my positions were absolute and that the z indexes were handled properly, but I still get the same issue. doing padding-top on the body did not give me the result I wanted either. Here are some before and after pictures.
#top {
top: 0;
position: fixed;
z-index: 1;
}
.topbar {
height: 90px;
background-color: #24414e;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
animation-name: greeting;
animation-duration: 8s;
animation-delay: 1s;
}
#keyframes greeting {
0% {
background: url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
60% {
opacity: 1;
}
}
/*
.topbar:hover{
background:url('https://cdn.dribbble.com/users/751466/screenshots/3360272/hello-3.gif');
background-size: 100% 100%;
}
*/
.logo {
transform: translateY(50%);
font-family: "Dancing Script";
color: #ffffff;
}
.holder {
width: 5%;
height: 80%;
margin-right: 30px;
margin-top: 10px;
}
.out {
margin-top: 46px;
color: #ffffff;
margin-right: 0;
}
.out:hover {
text-decoration: underline;
}
.menu {
height: 15%;
margin-top: 0px;
background-color: #f7ce3e;
}
/*
.iconbar{
margin-top: 20px;
margin-right: 20px;
margin-left:20px;
height =
text-align: center;
border-left: 2px solid #24414e;
border-right: 2px solid #24414e;
border-top: 2px solid #24414e;
border-bottom: 2px solid #24414e;
}
*/
.icon {
margin-top: 10px;
color: #24414e;
animation-name: iconSlide;
animation-duration: 1s;
}
.txt {
font-size: 15px;
visibility: hidden;
margin-top: 0px;
color: #24414e;
}
#keyframes iconSlide {
0% {
transform: translateX(600%);
}
100% {
transform: translateX(0);
}
}
.icon-1:hover~.txt-1 {
visibility: visible;
}
.icon-2:hover~.txt-2 {
visibility: visible;
}
.icon-3:hover~.txt-3 {
visibility: visible;
}
.icon-4:hover~.txt-4 {
visibility: visible;
}
.icon-5:hover~.txt-5 {
visibility: visible;
}
.icon-6:hover~.txt-6 {
visibility: visible;
}
.icon:hover {
color: #ffffff;
}
.rest {
height: 100%;
}
.contacts {
position: relative;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<!---This is for importing bootstrap and the CSS File--->
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="templatestyle.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.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.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Dancing Script' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!---Nav Bar and Header--->
<section id="top">
<!---Header--->
<div class="container-fluid topbar">
<h1 class="float-left logo">Example</h1>
<h5 class="float-right out">log out</h5>
<img src="blank-person-male.png" alt="profilepic" class="rounded-circle float-right holder"></img>
</div>
<!---Nav Bar--->
<div class="container-fluid menu" id="openMenu">
<div class="row">
<div class="col-2 text-center">
<i class="fa fa-tachometer fa-2x icon icon-1" aria-hidden="true"></i>
<h5 class="txt txt-1">Dashboard</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-user fa-2x icon icon-2" aria-hidden="true"></i>
<h5 class="txt txt-2">Profile</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-certificate fa-2x icon icon-3" aria-hidden="true"></i>
<h5 class="txt txt-3">Certificates</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-paper-plane fa-2x icon icon-4" aria-hidden="true"></i>
<h5 class="txt txt-4">Send/Apply</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-cog fa-2x icon icon-5" aria-hidden="true"></i>
<h5 class="txt txt-5">Settings</h5>
</div>
<div class="col-2 text-center">
<i class="fa fa-envelope fa-2x icon icon-6" aria-hidden="true"></i>
<h5 class="txt txt-6">Messages</h5>
</div>
</div>
</div>
</section>
<section class="rest container-fluid">
<h2 class="text-center"><u>Dashboard</u></h2>
<!---Contacts--->
<h4>Online contacts:</h4>
<div class="row contacts">
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 1</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 2</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 3</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 4</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 5</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 6</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3">
<div class="card border-success">
<div class="card-header">Person 7</div>
<div class="card-body">
<img src="blank-person-male.png" alt="profilepic" class="card-img-top rounded"></img>
</div>
<div class="card-footer">
<button type="Button" class="bg-primary rounded mx-auto .text-light">Send Chat</button>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

This is a simple fix, just set your Header z-index: 2; and your cards z-index: 1;.
I didn't really go over your code but setting the header an higher z-index as the content for sure will fix it.

The answer is you have given position:fixed to the header(.top) to fix it at the top with top:0, so you must need to give margin-top to the section next to it containing classes class="rest container-fluid" otherwise it will overlap as it seems with absolute positioned element.
Setting margin:top:159px fix the issue.
Please note that 159px is top header's height here. Happy coding :)

Use the fixed-top class instead of the top CSS code. And add 160px padding-top for the body.
/*
The headers height is 159.5px
*/
body {
padding-top: 160px;
}
fixed-top removes the element that you use it for, from the normal flow of the content, and, hence, the element will overlay the other content
To fix the issue, you need to push down the main content equal or larger than the height of the fixed-top element. You can do so by setting the padding-top of the body equal or larger than the fixed-top element's height. For example, if the fixed-top element's height is 72px, padding-top of body should be, at least, 72px. If you wish, you can use relative units: padding-top: 4.5rem; instead of padding-top: 72px;.
body {
padding-top: 72px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<div class="fixed-top bg-light">
<div>
<noscript>
<h1 style="color:#FF0000;">
This reportFile will not be navigable without Javascript, please enabled Javascript
</h1>
</noscript>
<img srcset="style/songkongheader.png 400w,style/songkongheader-medium.png 200w,style/songkongheader-small.png 100w," sizes="(max-width:800px) 200px,(max-width:600px) 100px,400px" class="mb-2">
</div>
<header>
<h2 class="subheading" title="Start Fixing Songs">
<a class="mx-2">
Fix Songs
</a>
</h2>
</header>
</div>
<main class="container-fluid bg-primary bd-">
<div class="row">
<div class="col py-5">Hello</div>
</div>
</main>
This is what both bootstrap-3 and bootstrap-4 has done. I recommend you to inspect it yourself.
You may find these two link useful.
w3schools - How to - fixed menu
teamtreehouse - div hiddne below fixed position navbar
A codepen of your work

Bootstrap 4 - Rows overlapping when reaching mobile screen size

My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?
Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.
Here's the live code: Codepen - Bootstrap rows overlapping
Here's my current HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" />
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
Any guidence would be helpful!

Change height from vh to %
.v-align{
height:30%;
}
#import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
background-color: ;
padding-top: 70px;
}
#full-h {
height: 100%;
width: 100%;
}
.txt-wrap {
word-wrap: break-word;
}
.v-align {
height: 30%;
}
.v-align2 {
height: 40%;
}
.fl-row {
background-color: #314d74;
}
.f-row {
margin-top: 6vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.s-row {
background-color: #b3bdc7;
}
.s-row-box {
padding: 5vh;
text-align: center;
}
.t-row {
background-color: #697fa4;
}
h1 {
color: #FFE082;
text-align: center;
margin-top: 2vh;
}
h2 {
border-left: 4px solid #FFB300;
}
.sol-icons {
font-size: 72px;
}
.sol-icons-cap {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.form-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact.s-row-box {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 576px) {
/* ... */
}
#media (min-width: 768px) {
/* ... */
}
/****** Canvas Animation ******/
/***** Animation CSS Code *****/
.project-title--container,
.project-link--container {
width: 100%;
text-align: center;
}
.project-title,
.project-link {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.project-title {
font-size: 18px;
margin-top: 10px;
}
.project-link,
.project-link a {
color: #fff;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.fa {
font-size: 22px !important;
padding: 0 5px;
color: #fff;
}
.container-animation--flexbox {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.animationItem {
position: absolute;
margin-right: 35px;
}
#animationItem-image--bigCloud {
animation: bobble 2s infinite;
margin-top: 3vh;
margin-left: 12vh;
font-size: 170px;
color: #7ec0ee;
}
#animationItem-image--smallCloud {
animation: bobble 4s infinite;
margin-top: 12vh;
margin-left: 20vh;
font-size: 145px;
color: #e9e9e9;
}
.smallCloud-two {
margin-bottom: 5px;
margin-right: 320px;
font-size: 145px;
z-index: -1;
color: #d9d9d9 !important;
animation: bobble 2.5s infinite !important;
}
#keyframes bobble {
0% {
transform: translate3d(0px, -25px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(0px, -35px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, -25px, 0px);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Network Technology</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
</html>

Why does the file add white space when I add an image to my file?

I've been working on a website using Bootstrap 4 where there are three images inside a .row div. The problem I'm having, however, is that I want all the images to have the same height, so I created my own class where I set height: 20% and width: auto The images look exactly how I want them to, however, for each image a certain amount of pixels are added under that div and it sets a huge gap between the section that has the images and the section that follows it. I was wondering what would be a way to avoid this from happening since I don't want to keep that gap between both sections. Here's a fiddle with what I'm talking about https://jsfiddle.net/wxg51v5x/ (Comment out the images to see the difference in action). Thanks!
EDIT: Included the code itself.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4">
<img class="program-logo" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: auto;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */

The problem was coming from your program-logo class and the large images.
I used the img-fluid class for the images as well as the px-5 class for the third image and also re-arranged things a little bit by using the container class instead of container-fluid and nesting images into their own row-column pairs for easier manipulation using Bootstrap 4 native classes alone (without any custom css).
Also note: I added the background color classes (bg-warning and bg-secondary) just to see what's happening and commented out some your other stuff that was unnecessary in my option. Feel free to adjust that as needed.
I only dealt with the upper section and the spacing underneath because that was your question. But you might want to do some adjustments for the bottom section because that container-fluid doesn't make it look good on wide 4K screens.
Here's the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container bg-warning" id="programs">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<!--
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
-->
<h3 class="font-heavy mt-3">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/2%20CITE_CITE%20Logo%20C.png" alt="Caribbeans In Tech + Entrepreneurship" />
</div>
</div>
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 offset-2 offset-md-1 pb-3">
<img class="img-fluid" src="https://illicitmind.com/static/img/bwn4.png" alt="Build With, Not For" />
</div>
</div>
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 pb-3">
<div class="row">
<div class="col-8 col-md-10 col-xl-8 offset-2 offset-md-1 offset-xl-2 pb-3">
<img class="img-fluid px-5" src="https://illicitmind.com/static/img/Gsd-Logo.png" alt="Get Shit Done" />
</div>
</div>
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
<!-- </div>-->
</div>
<div class="container-fluid bg-secondary" id="formula">
<!-- <div class="d-flex align-items-center justify-content-center">-->
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
<!-- </div>-->
</div>

The space you are talking about is coming because you use .program-logo width:auto; i changed the property and the space is gone i did it in below code you should try it.
<!DOCTYPE html>
<html>
<head>
<title>Illicit Mind Inc. - Programs</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no" />
<link rel="stylesheet" href="./css/bootstrap.min.css" />
<link rel="stylesheet" href="./css/font-awesome.min.css" />
<link rel="stylesheet" href="./css/styles.css" />
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-md fixed-top">
<a class="navbar-brand" href="./index.html"><img src="./imgs/logo.png" alt="Illicit Mind Inc."/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="./programs.html">Programs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about-us.html">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./contact-us.html">Contact Us</a>
</li>
</ul>
<div>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./login.html">Login/Signup</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background Image -->
<div class="full-height bg-image"></div>
<!-- Background Image -->
<!-- BWNF -->
<div class="absolute-top" id="bwnf">
<div class="d-flex align-items-center justify-content-center full-height full-width">
<div class="text-center">
<h1 class="text-white font-heavy text-center display-1">Build With, Not For</h1>
<hr class="bg-white main-hr" />
</div>
</div>
</div>
<!-- BWNF -->
<!-- Programs -->
<div class="container-fluid" id="programs">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<div class="logo-buffer"></div>
<div class="logo-buffer"></div>
<h3 class="font-heavy">Our Great Programs</h3>
<br />
<div class="row">
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/cite-logo.png" alt="Caribbeans In Tech + Entrepreneurship" />
<br /> <br />
<h4>CITE</h4>
<p>A professional collective of Caribbeans in the innovation ecosystem.</p>
<button class="btn">Learn More</button>
</div>
<div class="col-md-4 col-sm-12">
<img class="program-logo" src="./imgs/bwnf-logo.png" alt="Build With, Not For" />
<br /> <br />
<h4>Build With, Not For</h4>
<p>A series of hackathons where we encourage community members, hackers, business people and students to come together and create solutions to problems in their communities.</p>
<button class="btn">Register</button>
</div>
<div class="col-md-4 col-sm-12">
<img height="20%" width="auto" src="./imgs/gsd-logo.png" alt="Get Shit Done" />
<br /> <br />
<h4>Get Shit Done</h4>
<p>An annual summit, Classes and workshops that teaches innovation in a non-traditional educational method and setting.</p>
<button class="btn">Attend</button>
</div>
</div>
</div>
</div>
</div>
<!-- Programs -->
<!-- Formula -->
<div class="container-fluid" id="formula">
<div class="d-flex align-items-center justify-content-center">
<div class="text-center">
<h3 class="font-heavy">Tribe Secret Formula</h3>
<h6>In all of our programming, we provide the three fundamental things that it takes to create a successful innovator.</h6>
<br />
<div class="row">
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-flask fa-4x"></span></h1>
<p>Experiences</p>
<p>Our exciting events are packed with creativity, content and connection! At our highly collaborative events you get the chance discover your internal uniqueness.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="fas fa-users fa-4x"></span></h1>
<p>Connections</p>
<p>You are the average of the five people you spend the most time with" - Jim Rohn. Connect with peers that will help you positively progress into your future.</p>
</div>
<div class="col-md-4">
<h1 class="lead"><span class="far fa-lightbulb fa-4x"></span></h1>
<p>Knowledge</p>
<p>Our open, direct and community style approach to education allows individuals to gain invaluable hands-on knowledge that will accelerate their success.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Formula -->
<!-- Footer -->
<footer class="full-width text-center">
<div>
<p>
© <span id="year"></span> Illicit Mind Inc. All Rights Reserved.<br />
<span> </span>
<span> </span>
</p>
</div>
</footer>
<!-- Footer -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script type="text/javascript" src="./js/scripts.js"></script>
</body>
</html>
CSS:
#font-face {
font-family: 'Futura Book';
src: url('./fonts/futura-book-webfont.woff2') format('woff2'),
url('./fonts/futura-book-webfont.woff') format('woff');
font-style: normal;
}
#font-face {
font-family: 'Futura Heavy';
src: url('./fonts/futura-heavy-webfont.woff2') format('woff2'),
url('./fonts/futura-heavy-webfont.woff') format('woff');
font-style: bold;
}
* {font-family: 'Futura Book', Arial, sans-serif}
.absolute-top {
top: 0;
position: absolute;
}
.absolute-bottom {
bottom: 0;
position: absolute;
}
.logo {
width: auto;
height: 15vh;
}
.navbar-brand > img {
width: auto;
height: 55px;
}
.program-logo {
width: 40%;
height: 20%;
}
nav {
background-color: white;
box-shadow: 0px 1px 10px 0px #4191B4;
}
.bg-image {
background: url('../imgs/bwnf-3.jpg') no-repeat center center fixed;
background-size: cover;
}
footer {
padding-top: 10px;
line-height: 1.25;
}
.login-divider hr {
width: 42.5vw;
margin-left: auto;
margin-right: auto;
border: .25px solid rgba(134, 142, 150, .25);
}
.main-hr {width: 0}
.interests {padding-left: 25px}
.profile-picture {height: 25vh}
.font-book {font-family: 'Futura Book', Arial, sans-serif}
.font-heavy {font-family: 'Futura Heavy', Arial, sans-serif}
body {overflow-x: hidden}
.padding-top {padding-top: 95px}
.left-hr {float: left}
.right-hr {float: right}
.logo-buffer {height: 10px}
a:hover {text-decoration: none}
input {text-align: center}
.fa-bars, a {color: rgba(65, 145, 180, .95)}
.fa-bars:hover, a:hover {color: rgba(65, 145, 180, 1)}
.bg-google {background-color: #EA4335}
.bg-fb {background-color: #3B5998}
.full-width {width: 100vw}
.full-height {height: 100vh}
.card-header {cursor: pointer}
/* #programs {background-image: linear-gradient(to top, #4191B4 5%, white 100%)}
#formula {background-image: linear-gradient(to top, white 0%, #4191B4 95%)} */