如何让div与视口两侧边缘对齐？FreeCodeCamp表单布局求助

我正在为FreeCodeCamp练习制作一份基础调查表单，希望顶部div容器能延伸至视口的左右两侧边缘，但目前左侧存在间隙，我想消除这个间隙。

当前代码 #

CSS 代码

html,
body {
  overflow-x: hidden;
  background-color: #ffffff;
  background-image: url(https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.heading {
  text-align: center;
}

#title {
  width: 500%;
  margin-left: -200%;
  background-color: rgba(255, 255, 255, 0.3);
  font-family: Calibri, Tahoma, Arial;
  font-size: 35px;
  font-weight: 500;
  color: #272a2b;
  border-radius: 5px;
  padding: 10px 0px 10px 0px;
}

HTML 代码

<!DOCtype html>
<html lang="en">
<link rel="stylesheet" href="styles.css">

<head>
  <metacharset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Registration Form</title>
</head>

<body>

  <div class="heading">
    <h1 id="title">Registration Form</h1>
    <p id="description">Tell us about yourself</p>
  </div>

  <!-- FORM BODY -->

  <form id="survey-form">
    <div class="form-bg">

      <div class="form-group">
        <label for="name" id="name-label">Name</label>
        <input type="text" id="name" name="name" placeholder="Enter Your Name Here" required>
      </div>

      <div class="form-group">
        <label for="email" id="email-label">Email</label>
        <input type="email" id="email" name="email" placeholder="Enter Your Email Here" required>
      </div>

      <div class="form-group">
        <label for="number" id="number-label">Age</label>
        <input type="number" id="number" name="age" min="13" max="110" placeholder="Enter Your Age">

      </div>


      <div class="form-group">

        <label for="dropdown" id="dropdown-label"> 
            Which option is your ideal role?</label>
        <select name="dropdown" id="dropdown">
          <option value="" disabled selected hidden>Select your ideal role</option>
          <option name="ideal-role" value="software-engineer">
            Software Engineer
          </option>
          <option name="ideal-role" value="software-developer">
            Software Developer
          </option>
          <option name="ideal-role" value="data-analyst">
            Data Analyst
          </option>
          <option name="ideal-role" value="web-developer">
            Web Developer
          </option>
          <option name="ideal-role" value="mobile-app-developer">
            Mobile App Developer
          </option>
        </select>

      </div>


      <div class="form-group">

        <label for="study-hours" id="hours-label">How many hours per day can you study?</label><br>

        <input type="radio" name="study-hours" id="1-hour" value="1-hour">
        <label for="1-hour">1 Hour</label><br>
        <input type="radio" name="study-hours" id="2-hours" value="2-hours">
        <label for="2-hours">2 Hours</label><br>
        <input type="radio" name="study-hours" id="3-hours" value="3-hours">
        <label for="3-hours">3 Hours</label><br>

        <input type="radio" name="study-hours" id="4-hours" value="4-hours">
        <label for="4-hours">4 Hours</label>

      </div>


      <div class="form-group">

        <label for="checkbox" id="checkbox-label">Check which activities you enjoy:</label><br>

        <input type="checkbox" name="checkbox" id="problem-solving" value="problem-solving">
        <label for="problem-solving">Problem Solving</label><br>

        <input type="checkbox" name="checkbox" id="mathematics" value="mathematics">
        <label for="mathematics">Mathematics</label><br>

        <input type="checkbox" name="checkbox" id="data-analysis" value="data-analysis">
        <label for="data-analysis">Data Analysis</label><br>

        <input type="checkbox" name="checkbox" id="graphic-design" value="graphic-design">
        <label for="graphic-design">Graphic Design</label>

      </div>



      <div class="form-group">

        <label for="comments">Add any other comments here:</label>
        <textarea name="comments" id="comments" placeholder="Type your comments here..." rows="8"></textarea>

      </div>


      <div class="button-wrap">
        <input type="submit" id="submit" value="Submit">
      </div>
    </div>



    <!-- END OF FORM BODY -->

  </form>
</body>

</html>

我尝试过相关教程，但仅能让右侧延伸出屏幕，左侧仍存在间隙。

左侧间隙的核心原因是浏览器默认给<body>元素添加了margin值，加上你用width:500%配合负margin的实现方式逻辑复杂，容易出问题。下面是两种简单可靠的解决方法：

方法一：重置默认边距+简化标题样式 #

这是最常规的解决方案，先清除浏览器默认样式，再让标题自然占满宽度：

1. 清除body的默认外边距：

body {
  margin: 0; /* 移除浏览器默认的body左右外边距 */
  overflow-x: hidden;
  background-color: #ffffff;
  background-image: url(https://images.pexels.com/photos/1103970/pexels-photo-1103970.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

2. 简化#title的宽度设置，直接让它占满父容器：

#title {
  width: 100%; /* 占满.heading的宽度，也就是视口宽度 */
  background-color: rgba(255, 255, 255, 0.3);
  font-family: Calibri, Tahoma, Arial;
  font-size: 35px;
  font-weight: 500;
  color: #272a2b;
  border-radius: 5px;
  padding: 10px 0;
  margin: 0; /* 可选：移除h1默认的上下边距 */
}

3. 确保.heading没有额外间距：

.heading {
  text-align: center;
  margin: 0;
}

方法二：绝对定位突破容器限制 #

如果你的.heading被其他带宽度限制的容器包裹，需要强制突破限制占满视口，可以用绝对定位：

.heading {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
#title {
  background-color: rgba(255, 255, 255, 0.3);
  font-family: Calibri, Tahoma, Arial;
  font-size: 35px;
  font-weight: 500;
  color: #272a2b;
  border-radius: 5px;
  padding: 10px 0;
}

内容的提问来源于stack exchange，提问作者monstermind