为何我的div元素右侧出现空白区域？已尝试多种方法未解决

Let's break down why you're seeing that mysterious white space on the right and how to fix it:

Common Culprits & Solutions #

1. Missing box-sizing: border-box
   Without this property, any padding or border added to child elements (like your form inputs) will add to their total width—potentially pushing them beyond the container's bounds and creating horizontal overflow. Add it to your global reset:

   * { 
     font-family: 'Poppins', sans-serif; 
     margin: 0; 
     padding: 0;
     box-sizing: border-box; /* Critical fix for accurate width calculations */
   }
   

2. Unset Dimensions on html and body
   Your .login-container uses height: 100% and width: 100%, but these values only work if the parent elements (body and html) have explicit dimensions. Add this to your CSS to ensure the container fills the entire viewport:

   html, body {
     height: 100%;
     width: 100%;
     overflow-x: hidden; /* Hides horizontal scrollbars caused by accidental overflow */
   }
   

3. Unconstrained Form Width
   Bootstrap's form-control class might be adding styles that cause unintended width issues. To keep your form neatly contained, limit its maximum width and center it:

   .login-container form {
     max-width: 400px; /* Prevents the form from stretching too wide */
     width: 100%;
     margin: 1rem auto;
   }
   

Updated Full CSS #

Here's the combined fixed stylesheet:

* { 
  font-family: 'Poppins', sans-serif; 
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.login-container { 
  text-align: center; 
  background-color: aqua; 
  height: 100%; 
  width: 100%;
  padding: 2rem; /* Adds breathing room around your content */
}

.login-container form {
  max-width: 400px;
  width: 100%;
  margin: 1rem auto;
}

Quick Debug Tip #

If you're still seeing the white space, open your browser's DevTools (F12), go to the Elements tab, and hover over elements to inspect their box model. This will show you exactly which element is extending beyond the viewport width—pointing you straight to the source of the issue.

内容的提问来源于stack exchange，提问作者Salam-16