How to eliminate excess white space on the right side in Bootstrap 4

Could someone please clarify why I am experiencing a white space on the right side when using Bootstrap 4?

This is the primary code block for the page.

<main id="intro" role="intro" class="inner text-center">
    <h2>Lorem Ipsum</h2>
    <p class="lead">Register now!</p>
    <p class="lead">
      <a href="<?php echo HOME ?>/register" class="btn btn-light btn-lg">Click here</a>
    </p>
</main>

Below is the custom CSS code:

html,
body,
header,
#intro {
  height: 100%;
}

#intro {
  background: linear-gradient(to bottom, rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url("../img/intro-1.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  color: #fff;
  padding-top: 250px;
}

If necessary, I am able to provide a website URL. Thank you for any assistance!

EDIT: For quick reference, here is the link to the website:

javascriptcssbootstrap-4removing-whitespace

Answer №1

Your footer may be causing the issue because it has a row without a container, resulting in margin overflow on the right side. Here's a helpful tip for the future: inspect your elements and delete them one by one until the error disappears, pinpointing the cause of the issue.

To fix your page, make sure to add a container class to your footer:

<footer class="pt-4 my-md-5 pt-md-5 border-top text-center container">
  <div class="row">
    <div class="col-12 col-md">
      <img class="mb-2" src="img/logo-kurz.svg" alt="" width="75" height="75">
      <small class="d-block mb-3 text-muted">© 2018</small>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Links</h5>
      <ul class="list-unstyled text-small">
        <li><a class="text-muted" href="http://drohnen-vz.de/agb">AGB</a></li>
        <li><a class="text-muted" href="http://drohnen-vz.de/impressum">Impressum</a></li>
        <li><a class="text-muted" href="#">Datenschutzrichtlinien</a></li>
      </ul>
    </div>
    <div class="col-6 col-md text-center">
      <h5>Partner</h5>
      <ul class="list-unstyled text-small">
        <li><img src="img/partner-1.svg" width="100px"> <img src="img/partner-dhl.svg" width="100px"></li>
        <li><br></li>
        <li><img src="img/partner-sofort.svg" width="100px"> <img src="img/partner-paypal.svg" width="100px"></li>
      </ul>
    </div>
  </div>
</footer>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JavaScript to manage sections within a dropdown menu

When dealing with this particular HTML code, there is a feature where a list item includes options such as all, a, b, c, and d. If the user selects 'All', it should restrict them from choosing any other items. However, if they do not choose &apos ...

javascript

Tips for successfully implementing Angular.js validation within the confines of a <form> element

Having trouble getting my code to work when I place my app inside the <form name="myForm"> tag. Any suggestions on how to make it function properly? (It works when I place myForm inside ng-app, but my app needs to be within the <form> tag) < ...

javascriptangularjsvalidationangular-validation

The animations in fontawesome 6.2 are completely ineffective

I've been struggling to make a spinner icon spin on my webpage. I made sure to download the latest version of font awesome and created a simple HTML file to troubleshoot the issue. Take a look at the HTML code below: <!doctype html> <html la ...

htmlcssfont-awesome

What is the best way to receive a response from the foo.onload = function() function?

My current code involves a function that is triggered by .onload, and I'm looking to return a specific value based on certain conditions: newImg.onload = function() { var height = newImg.height; var width = newImg.width; if(height > wi ...

javascriptjquery

Enhanced Vertical Space Produced on my Website in Firefox

For some reason, Firefox is adding an extra 250px at the end of my website below the footer. I have not been able to determine why this is occurring. Note: The site functions properly on all other browsers; the issue is specific to Firefox. You can view ...

htmlcssfirefox

Ways to implement collapsible functionality into table rows

I have a table on my website and I want to initially display only 3 rows. When the user clicks on the 'more' button, I want the rest of the rows to be displayed. However, when I tried implementing this with code, I encountered rendering issues. I ...

javascriptjqueryhtml

Is it possible to ban a user who is not a member of the current guild using Discord.js library?

Currently, I am developing a bot with moderation capabilities and have encountered a challenge in finding a method to ban a user other than using member.ban(). While this function works effectively for users who are currently in the guild, it fails to wo ...

javascriptnode.jsdiscorddiscord.js

Tips for initiating a jQuery form submission

At this moment, the form is being submitted using the default URL. I would like it to utilize the form submit event in my JavaScript code so that it can pass the .ajaxSubmit() options. Below is the corresponding JavaScript code: $('#selectedFile&a ...

javascriptjqueryajax

Invoke a function within an HTML element inserted using the html() method

Looking for help with a JavaScript function: function toggle_concessions(concessions) { var text = "<table>"+ "<tr><td class='concession-name'>gfhgfbfghfd</td><td class='op-encours&a ...

javascripthtmlfunctionappend

There is an abundance of brief PHP documents

After conducting some initial research, I have realized that I need more information on the topic at hand. My interactive website relies on ajax calls to retrieve data from the server. Authenticated users engage with this data through various actions, whic ...

javascriptphpmysqlajaxdatabase

What is the rationale behind using both useMemo and createSelector in this code?

This example from the React-Redux documentation showcases how a selector can be utilized in multiple component instances while depending on the component's props. import React, { useMemo } from 'react' import { useSelector } from 'reac ...

javascriptreactjsreduxmemoization

Incorporating a timer feature into the code for my memory game

Seeking the optimal method to incorporate a timer into my memory game. This game comprises numerous squares, and when the user successfully completes it, a modal appears congratulating them on their win and providing an option to restart the game. The obj ...

javascript

Tell webpack to exclude a specific import

Currently, I am in the process of developing a desktop application using ElectronJS and ReactJS. To bundle the renderer process that utilizes JSX, I have opted to use webpack. An issue arises when attempting to import anything from electron into the rend ...

javascriptreactjswebpackelectron

Retrieve the data of elements that have been clicked using jQuery

I am struggling with a particular issue and would appreciate some assistance. Recently, I've been working on developing buttons that, when clicked, add data to a form for submission. An example of the code structure is as follows: <div> < ...

javascriptjqueryclickelement

encountering issue alerts when using the MUI TextField module alongside the select function

Encountering an error in the MUI console: children must be provided when using the TextField component with select. <TextField select id="outlined-basic" label="User Name" name="user" size="small" {...teamForm.getFieldProps("user")} erro ...

javascriptreactjsmaterial-ui

Issue encountered while generating REST API through Postman resulting in a 500 error

I am in the process of creating a Node.js API for a web application. The GET request is functioning properly, however, when attempting to execute a POST request, I encounter an error messageError Below is the code snippet: //User Schema const mongoose ...

javascriptnode.jspostman

Chrome is struggling to load pages, forcing users to scroll endlessly to find the content they are looking for

Encountering a problem where Chrome occasionally displays a particular page off-screen. Currently using Mac OSX, working on a Backbone.js App with client-side development only, no PHP/Node. The page is loading completely off-screen, requiring me to scrol ...

javascriptjquerygoogle-chrome

The return value of fs.mkdirSync is undefined

I'm facing a challenge with creating a directory and utilizing that directory as a variable to extract files from zip/rar files. The section of code that is causing an error is shown below: var fileZip = fileName.replace(/^.*[\\\/]/, ...

javascriptnode.jsfs

Is there any way to extract the source files from a compiled Electron application?

Is there a way to extract the contents of a .app Application developed using Electron for Mac OS? I'm eager to explore the underlying source files, but I'm not familiar with the procedure to access them. Any assistance would be greatly appreciate ...

javascripthtmlnode.jsmacoselectron

What is the best way to customize the appearance of a non-current month cell within the date picker?

I'm currently in the process of developing a registration form for my JavaFX application. I am faced with an issue where I need to disable certain cells in the date picker when they do not belong to the displayed month. Let's take a look at my cu ...

javacssjavafx