网站设置width为100%仍横向滚动，疑footer中social-icons导致求排查

Hey there, you were spot-on to suspect the footer and social icons as the source of your horizontal scroll problem. Let's break down the root causes and fix them step by step:

1. Box Model Overflow in Footer #

The main culprit is how CSS calculates element width by default. Your footer has width: 100% plus padding-left: 20px, and the inner .social-icons also uses width: 100%. Browsers use the content-box model by default, which means padding gets added to the element's total width—making it wider than the viewport and triggering the horizontal scroll.

Fix: #

Update your footer CSS to use box-sizing: border-box, which ensures padding is included within the defined width:

footer {
  background-color: rgba(0,0,0,0.3);
  height: 60px;
  width: 100%;
  padding-left: 20px;
  padding-top: 8px;
  box-sizing: border-box; /* Makes padding count towards the 100% width */
}

Then adjust the .social-icons to avoid unnecessary width constraints (and optionally make icons align cleaner):

.social-icons {
  /* Remove width: 100% here—it's not needed and can cause overflow */
  display: flex; /* Optional: Lines up icons neatly */
  gap: 10px; /* Optional: Adds space between icons */
  align-items: center;
  height: 100%;
}

2. Typo in Image Attributes #

You have a small typo in your social icon HTML: weight="45" should be width="45". While this might not be the main scroll issue, fixing it ensures icons render at the correct size without unexpected layout shifts:

<!-- Corrected icon tags -->
<img src="../images/fb-icon.png" alt="Facebook" height="45" width="45">
<img src="../images/yt-icon.png" alt="YouTube" height="45" width="45">
<img src="../images/instagram-icon.png" alt="Instagram" height="45" width="45">
<img src="../images/twitter-icon.png" alt="Twitter" height="45" width="45">

3. Optional: Add a Safety Net #

To prevent any other hidden overflow issues, add this to your body CSS as a fallback:

body {
  background-image: url("../images/background1.png");
  background-size: cover;
  margin: 0;
  overflow-x: hidden; /* Stops horizontal scroll from unexpected elements */
}

After making these changes, your horizontal scroll should disappear entirely. Let me know if you run into any other layout quirks!

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