网页内容超出屏幕宽度，右侧滚动条问题求助

问题排查与修复步骤： #

1. 添加视口元标签（移动端适配核心）
   缺失该标签会导致网页在移动设备上缩放异常，引发横向滚动。在HTML的<head>中添加：

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

2. 修复HTML标签闭合错误
   代码中<a href="index.html"><img ...></div>的<a>标签未闭合，会导致DOM结构错乱，引发布局异常。修改为：

   <div class="logo-wrapper">
       <a href="index.html"><img src="/Users/Desktop/Website/images/AdobeStock_491355559.jpeg" style="width: 100%;"></a>
   </div>
   

3. 移除body的冗余边框与内边距
   body上的solid border和padding-left:2px会在width:100%基础上额外占用宽度，导致横向溢出。修改body的CSS：

   body {
     margin: 0;
     overflow-x: hidden;
     /* 移除border和padding-left */
   }
   

4. 确保导航容器适配宽度
   若.nav-wrapper的子元素是横向排列，需设置换行避免溢出。添加以下CSS：

   .nav-wrapper {
     display: flex;
     flex-wrap: wrap;
     gap: 1rem; /* 可选，增加导航项间距 */
     padding: 0 1rem; /* 可选，避免内容贴边 */
   }
   
   .nav-link-wrapper {
     /* 若有固定宽度，改为max-width: 100%或直接移除 */
   }
   

5. 全局图片宽度控制
   给图片添加最大宽度限制，防止其超出容器范围：

   img {
     max-width: 100%;
     height: auto; /* 保持图片比例 */
   }
   

修改后的完整代码示例： #

CSS（styles.css）：

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: hidden;
}

* {
  box-sizing: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
}

.nav-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}

HTML：

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="galery.css">
</head>
<body>
    <div class="container">
        <div class="logo-wrapper">
            <a href="index.html"><img src="/Users/Desktop/Website/images/AdobeStock_491355559.jpeg" style="width: 100%;"></a>
        </div>
        <div class="nav-wrapper">
            <div class="nav-link-wrapper">
                <a href="index.html">Home</a>
            </div>
            <div class="nav-link-wrapper">
                <a href="grafikdesign.html">Stuff</a>
            </div>
            <div class="nav-link-wrapper">
                <a href="underpage24.html">About</a>
            </div>
            <div class="nav-link-wrapper">
                <a href="contact.html">contact</a>
            </div>
        </div>
    </div>
</body>
</html>

额外排查点： #

• 检查galery.css中是否有元素设置了固定宽度（如width: 1200px）或负边距，这类设置会直接导致横向溢出。
• 用浏览器开发者工具（F12）的元素选择器选中右侧空白区域，查看是哪个元素超出屏幕宽度，针对性调整。

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