html - 如何将 HTML 页面垂直分成 4 个部分

Question

我想将我的 HTML 页面分成 4 个不同的垂直部分。

我希望每个部分都有不同的背景颜色，为此我使用了 div 但它的每个背景颜色都没有覆盖每个部分的侧面。

** 我渴望的最终结果: 我不想在 html 中看到正文背景色的红色。

body {
  background-color: red;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div class="intro">

  <hr>
</div>
<div class="edu">

  <hr>
</div>
<div class="Skills">

  <hr>
</div>
<div class="end">

  <hr>
</div>

Answer 1

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-container>div {

margin:30px;
}
.flex-container hr {
   
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 10px;
    border-color: #FFF;
    box-shadow: none;
    border-width: 5px;
}

.intro {
  background-color: #674AB3;
}

.edu {
  background-color: #A348A6;
}

.Skills {
  background-color: #9F63C4;
}

.end {
  background-color: #9075D8;
}

<div class="flex-container">
  <div class="intro"><hr></div>
  <div class="edu"><hr></div>
  <div class="Skills"><hr></div>
  <div class="end"><hr></div>
</div>