如何为HTML页面左右设置空白边距，使内容居中显示

需求：给页面左右两侧设置边距，让所有内容在边距范围内居中显示，参考Ali Abdaal网站的布局效果。

现有代码问题分析 #

1. 内容区域缺少统一容器控制，导航与正文无法对齐
2. 图片设置了错误的margin-left:90em，导致严重偏移
3. 导航栏固定padding无法和内容区域边距匹配
4. 存在类名拼写错误（navabr1应为navbar1）
5. 部分元素设置不必要的固定高度，限制内容自适应

修改后的完整代码 #

CSS 代码

/* 全局基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.navbar1 { 
  padding: 0; 
  margin: 0; 
}
.nav { 
  text-align: center; 
}

#backroundcolourthing { 
  background-color: rgb(247, 251, 255); 
  padding: 10px; 
  border: 0;
  min-height: 100vh; /* 撑满视口最小高度 */
}

/* 导航栏与内容容器对齐 */
nav { 
  display: flex; 
  justify-content: space-between; 
  padding: 1rem 2rem; 
  background: rgb(245, 250, 255); 
  max-width: 1040px; 
  margin: 0 auto; /* 导航栏居中 */
}

.barsection { 
  margin: auto 0; /* 导航项垂直居中 */
}
nav ul { 
  display: flex; 
  list-style: none; 
  gap: 2rem; /* 用gap规范导航项间距 */
}
nav a { 
  text-decoration: none; 
  color: black; 
  font-size: 20px; 
  font-family: sans-serif; 
}

.aboutmeh2 { 
  font-size: 40px; 
  font-family: Optima; 
  text-align: center; 
}
.shortsryh2 { 
  font-size: 20px; 
  font-family: Optima; 
  text-align: center; 
}
.para2, .para1, .para3 { 
  max-width: 900px; 
  margin: 0 auto; /* 段落容器居中 */
  padding: 2rem; /* 内部边距 */
}
.a { 
  font-size: 20px; 
  font-family: sans-serif; 
  color: rgb(24, 24, 24); 
  text-align: left; 
  margin-top: 4rem; 
}
.headingforsmth { 
  font-size: 25px; 
  text-align: center; 
}
.centerimgonline { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
  width: 50%; 
}
.introname { 
  font-size: 40px; 
  font-family: Tahoma; 
  text-align: center; 
}
.introphrase1 { 
  font-size: 28px; 
  font-family: Optima; 
  text-align: center; 
}
.introphrase3 { 
  font-size: 20px; 
  font-family: Optima; 
  text-align: center; 
}
.post-header { 
  padding: 3rem 1rem; 
  background-color: rgb(255, 255, 255); 
  max-width: 1040px;
  margin: 0 auto;
}
/* 主页内容flex并排居中 */
.home__content {
  display: flex;
  align-items: center;
  gap: 4rem;
  max-width: 1040px;
  margin: 4rem auto 0;
  padding: 0 2rem;
}
.home__video, .home__intro { 
  flex: 1; /* 平分宽度 */
  margin: 0;
}
.container { 
  max-width: 1040px; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 0 2rem; /* 左右边距适配小屏幕 */
}
.table-of-contents { 
  padding: 2rem; 
  background-color: green; 
  max-width: 1040px;
  margin: 0 auto;
}
.post-content { 
  line-height: 1.7; 
}
.myphoto { 
  width: 100%; /* 图片自适应容器 */
  border-radius: 10px;
  transform: rotate(-5deg); /* 保留轻微旋转设计感 */
}
.myclass { 
  color: rgb(61, 88, 124); 
}

HTML 代码

<div id="backroundcolourthing">
  <!-- 修复类名拼写错误 -->
  <div class="navbar1">
    <nav>
      <div class="logo">
        <h2>VovaSite</h2>
      </div>
      <div class="barsection">
        <div class="nav-wrapper">
          <ul class="nav">
            <li><a href="Homepage.html">Home</a></li>
            <li><a href="aboutme.html">About</a></li>
            <li><a href="articles.html">articles</a></li>
            <li><a href="articles.html">articles</a></li>
            <li><a href="articles.html">articles</a></li>
            <li><a href="articles.html">articles</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>

  <!-- 新增内容容器实现居中边距 -->
  <div class="home__content">
    <div class="home__intro">
      <h2 class="introname"> Hi guys - </h2>
      <p class="introphrase1"> I'm name. I am a soon-to-be- <a class="myclass" href="http://www.google.com">Youtuber.</a> </p>
      <p class="introphrase3"> something text boring intresting information lol </p>
    </div>
    <div class="home__video">
      <img class="myphoto" alt="Pacific" src="img4.jpg">
    </div>
  </div>
</div>

关键修改说明 #

• 全局设置box-sizing: border-box，确保内边距不影响元素宽度计算
• 所有需居中的元素（导航、内容、段落）均设置max-width+margin:0 auto，搭配左右padding适配小屏幕边距
• 主页内容用flex布局实现文字与图片并排，自动平分宽度且居中对齐
• 移除图片错误的margin-left设置，改用宽度自适应容器，保留轻微旋转设计感
• 用gap替代导航项的padding-left和margin，布局更整洁
• 将固定高度改为min-height:100vh，让背景区域自动撑满视口

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