What could be causing my website to be wider than the window?

Currently, I am engaged in an educational project that involves developing a brief webpage to introduce users to a topic of their choice. However, I am facing an issue where my website is displaying a horizontal scrollbar, and I'm unable to pinpoint the exact element causing this problem. Despite my attempts to disable elements one by one, the solution continues to elude me.

I would greatly appreciate any advice or guidance on resolving this matter. Thank you in advance for your support!

<!doctype html>
<html lang="de">
<!-- Rest of the code snippets remain unaltered for reference -->

Creative enhancements to ensure optimum display 
in the virtual reality realm,
inducing immersive experiences through Full-Dive VR technology.
Exploring beyond the confinements of traditional screens,
dive headfirst into the captivating world awaiting at your fingertips.

Get ready to embark on an extraordinary journey!

Your adventure begins here, with Virtual Reality (VR) leading the way!
htmlcssbootstrap-4

Answer №1

Your layout is missing a container element around the rows. The margins of the two elements are conflicting. For proper alignment, please refer to the documentation and ensure that you include either container or container-fluid as the parent element of your rows.

Avoid using container classes on your columns - they are unnecessary, even within nested structures.

Answer №2

The issue is being caused by the margins in the .row class:

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* margin-right: -15px; */
  /* margin-left: -15px; */
}

A quick fix for this is to add overflow-x: hidden; to the body.

(function($) {

  "use strict";

  var fullHeight = function() {

    $('.js-fullheight').css('height', $(window).height());
    $(window).resize(function() {
      $('.js-fullheight').css('height', $(window).height());
    });

  };
  fullHeight();

  var burgerMenu = function() {

    $('.js-colorlib-nav-toggle').on('click', function(event) {
      event.preventDefault();
      var $this = $(this);
      if ($('body').hasClass('menu-show')) {
        $('body').removeClass('menu-show');
        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
      } else {
        $('body').addClass('menu-show');
        setTimeout(function() {
          $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
        }, 900);
      }
    })
  };
  burgerMenu();


})(jQuery);
html,
body {
  background-color: black;
  color: white;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

#h-100 {
  
  text-align: center;
}

.introduction {
  background-image: url("beat-saber-intro.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.row {
  padding-bottom: 10%;
}

.sketchfab-embed-wrapper {
  height: 100%;
  margin-bottom: 200px;
}

iframe {
  height: 100%;
  width: 100%;
}

header {
  height: 100%;
  min-height: 100%;
}

.center {
  text-align: center;
}


/* Menu*/

.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#colorlib-main-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.99);
  z-index: 1002;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  overflow-y: scroll;
}

#colorlib-main-nav .colorlib-table {
  display: table;
  width: 100%;
  height: 100%;
}

#colorlib-main-nav .colorlib-table .img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
}

#colorlib-main-nav .colorlib-table .img:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: '';
  background: rgba(0, 0, 0, 0.3);
}

#colorlib-main-nav .colorlib-table .colorlib-table-cell {
  display: table-cell;
  vertical-align: middle;
}

#colorlib-main-nav .colorlib-nav-toggle {
  position: absolute;
  top: 40px;
  right: 40px;
  padding: 20px;
  height: 44px;
  width: 44px;
  line-height: 0;
  padding: 0 !important;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s;
 -

...

</script>

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

Ways to ensure that list items have uniform height

I currently have a group of elements arranged horizontally using the display:inline-block property. However, one element is larger in height than the rest and extends beyond its boundaries. How can I adjust this element to match the height of the others w ...

javascriptjqueryhtmlcss

Is there a way to trigger an ajax call specifically on the textarea that has been expanded through jQuery?

Whenever I expand a textarea from three textareas, all three trigger an ajax call. Is there a way to only call the ajax for the specific expanded textarea? I tried using $(this).closest('textarea').attr('id'), but it didn't work. A ...

javascriptjqueryhtmlajax

How to Nest Div Elements in Bootstrap Grid System

I'm currently using bootstrap to create the structure for my website. However, I am facing an issue with arranging three div tags within one main div tag. Instead of appearing side by side, they are stacking on top of each other. <div class="col- ...

htmltwitter-bootstrap

Problem with video tag getting stuck

Is there a method to have the video tag remain fixed to the top (or bottom from the element above the video tag)? Currently, when the window is resized, the video element moves away from the top (or bottom). Could this be due to the video tag attempting to ...

htmlcssvideotags

Switching HTML text by clicking or tapping on it

I'm currently working on a website that will showcase lengthy paragraphs containing complicated internal references to other parts of the text. For instance, an excerpt from the original content may read: "...as discussed in paragraph (a) of section ...

javascriptjqueryhtmlcss

Thumbnails failing to line up in a continuous row

Having an issue creating a row with 3 thumbnails as they are not aligning in a single row, instead each thumbnail is going into a different row. echo "<table>"; echo "<tr>"; echo "</tr>"; while($r ...

phphtmlcssrowthumbnails

Images appear unaligned in group on mobile view due to responsiveness

Currently facing two issues: creating a responsive container for images where they stay side by side when the resolution changes. However, on testing with a phone, the images stack vertically instead of horizontally, and one image's width appears dist ...

htmlcssbootstrap-5

PHP: implementing several forms on a single webpage

In my current situation, I need to display forms that resemble an Excel sheet with a submit button next to each row. When the submit button is clicked, the data is saved for that specific row, the row is disabled, and the focus automatically moves to the n ...

phpjqueryhtmlmysqlforms

Troubleshooting CSS and Bootstrap display problems and bugs

Hey, I'm having some trouble with the PHP code for a Star Wars webpage that I'm working on for a university project. I'm encountering issues that I can't seem to fix. I've set up templates and have a basic design ready to connect t ...

phpcssbootstrap-4

wrap <td> data in a link with vue depending on certain conditions

I'm trying to customize the display of a particular table cell td. I want to show the data in a link if a certain condition is met, and if not, just show the data as text. However, I'm encountering some difficulties in implementing this. I have ...

javascripthtmlvue.js

Can you explain the concept of ".el" as it relates to JavaScript, HTML, and jQuery?

After conducting a search on Google, I didn't find much information. Perhaps I am using the wrong terms. I am trying to figure out what the "el" in "$.el" represents in the following code snippet: $.el.table( $.el.tr( $.el.th('first name ...

javascriptjqueryhtml

Having trouble accessing the sidenav's home page

I am currently utilizing Angular Material Design to develop a website, but I am encountering an issue where I am unable to open the home section of the side bar. Can anyone provide me with a solution or suggestion to resolve this issue? https://stackblitz. ...

cssangularangular-material

What purpose does the asterisk have in CSS?

Similar Question: Understanding the star-preceded property in CSS I recently came across a CSS file for a jQuery script and discovered the following code snippet: .usual div { *margin-top:-15px; clear:left; background:snow; font:10pt Georgia; ...

csssyntax

Tips for updating the color of the bootstrap well component

Recently, I embarked on my journey to learn PHP and encountered a challenge in changing the color of a well. After some research, I stumbled upon this code snippet: .well.homefull{ background: rgba(0, 0, 0, 0.4); } The confusion arises when it comes ...

csscolorsbackground-color

Implementing a Modal Form in Symfony 4

In my application, I have a collection of cars each represented by a button. When the button is clicked, a modal form pops up allowing me to create a ticket for that specific car. Here's an example: https://i.sstatic.net/tUnf0.jpg However, I'm e ...

symfonybootstrap-4doctrinetwigsymfony4

Content for Bootstrap carousel items can be divided into two separate divs arranged horizontally

I'm currently working with a bootstrap carousel that displays images and text on each carousel item. However, I want the content of each carousel item to be displayed horizontally, rather than vertically as shown in the image below. Here is the curre ...

htmlcsstwitter-bootstrapbootstrap-4

Position <p> at the center using Bootstrap 5

Having trouble centering a paragraph inside a div. Any assistance would be greatly appreciated! Below is the code I am working with: <div class="navbar d-flex flex-grow-1 justify-content-end align-items-end mb-3 d-none d-sm-flex"> <d ...

htmlbootstrap-5

What is the reason behind the fact that using margin: auto 0px; does not result in vertical centering of a block, whereas margin: 0px auto;

To effortlessly set the width to auto, use margin:0px, auto #container{ background-color: blue; height:600px; width:600px; margin:0px auto;} <div id="container"></div> However, why is it not possible to set the height to auto with margin:au ...

htmlcss

What steps can I take to avoid scaffold.css from taking precedence over my custom CSS?

I'm having trouble with this. It seems like a small issue, but I'm still very new to learning about rails. Any help you can provide would be greatly appreciated! Solution: To resolve the problem, I accessed the file responsible for adding head ...

ruby-on-railscss

"Accessing and updating the current navigation state using jQuery/ajax when clicked

Currently, I'm working on a website project where I am using a jquery/ajax script to dynamically pull in content from another page with a fade effect when clicking on a tab in the navigation menu. You can check out the effect on the page here. Only th ...

jqueryhtmlcssajax