如何为HTML/CSS开发的居中CV简历添加有效CSS外边框

当前简历效果如下：

问题原因 #

当前简历的头部、两栏内容区、底部补充内容区是三个独立设置了宽度和居中的分散块，没有统一的外层包裹容器，直接给body或单个模块加边框，都无法完整套住整份简历内容。

修复步骤 #

• 第一步：新增统一外层容器，把所有简历内容（header、main-details-sec、second-details-sec）包裹在同一个div容器内，作为边框的挂载载体。
• 第二步：给容器添加边框样式，同时统一内部模块宽度、修复浮动导致的高度塌陷问题，避免边框包裹不全。
• 第三步：微调原有模块的宽度、内边距，避免内容贴边框、宽度溢出的问题。

核心修改代码 #

HTML结构修改 #

在<body>标签内，所有简历内容外层新增包裹容器：

<body>
  <!-- 新增简历外层容器 -->
  <div class="cv-container">
    <header>
      <h1 id="name"> <span class="color-name">Pathum</span> Sandeepa</h1>
      <h4 id="tp-no">+94 76 XXXX XXX</h4>
      <h4 id="mail">pathumXXXXXXX@gmail.com</h4>
    </header>

    <div id="main-details-sec">
      <!-- 原有主内容区代码保持不变 -->
    </div>

    <div id="second-details-sec">
      <!-- 原有第二内容区代码保持不变 -->
    </div>
  </div>
</body>

CSS样式修改 #

新增容器样式，同时调整原有header和内容区的冲突样式：

body {
  font-family: sans-serif, Arial, Helvetica, sans-serif;
  margin-top: 0;
}

/* 新增外容器样式 */
.cv-container {
  /* 外边框：2px深灰色实线，可自行调整粗细、颜色 */
  border: 2px solid #3c4041;
  /* 可选：给边框加圆角 */
  border-radius: 6px;
  /* 容器最大宽度和原有头部宽度一致 */
  max-width: 700px;
  /* 容器整体在页面居中 */
  margin: 2rem auto;
  /* 清除内部浮动导致的高度塌陷，保证边框完整包裹所有内容 */
  overflow: hidden;
}

/*********Header Section************/
#name {
  text-align: center;
  color: white;
}
#tp-no {
  text-align: center;
  padding-top: 5px;
  color: white;
}
#mail {
  text-align: center;
  margin-top: -3px;
  color: white;
}
#name .color-name {
  color: #14a800;
}
/* 调整原有header样式，删除原有独立居中、宽度设置 */
header {
  line-height: 4px;
  padding-top: 10px;
  background-color: #3c4041f1;
  height: 6rem;
  width: 100%;
  box-sizing: border-box;
}

/*********main-details-sec************/
.column {
  float: left;
  width: 50%;
}
#main-details-sec {
  content: "";
  display: table;
  clear: both;
  margin: 3em auto 0;
  max-width: 660px;
  padding: 0 1rem;
  box-sizing: border-box;
}
.ol-list {
  line-height: 25px;
}
.education, .personal, .school, .contact {
  color: #14a800;
}
span {
  font-weight: bold;
}

/*********second-details-sec************/
#second-details-sec {
  margin: 2em auto 3em;
  max-width: 660px;
  padding: 0 1rem;
  box-sizing: border-box;
}
.other-edu, .Extra {
  color: #14a800;
}

补充说明 #

• 边框样式可自行修改：比如把border属性改成1px solid #14a800就是绿色细边框，调整border-radius数值可以改圆角大小。
• 原有代码中存在多个重复id（比如多个li标签共用personal-data、school-dataid），建议将这类重复id改为class，id在单页面中只能唯一存在，虽然不影响边框显示，但不符合HTML规范。

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