为什么背景颜色不显示:(

Question

我是Web开发的新手，无法弄清楚为什么我的两个班级（.work和.education）都不会显示背景色，但是页眉和页脚却显示吗？抱歉，如果措辞很差！我以为这可能与身体的边缘有关，所以我玩了一圈，但还是没有运气。

/ *全局样式* /

.content-wrap {

    max-width: 1200px;
    margin: 0 auto;
    padding: 100px;
    overflow: hidden;
    border: 5px solid black

}

.column-narrow {

    width: 35%;
    float: left;
    padding-right: 0%;

}
.column-wide {

    width: 62%;
    float: left;
    padding-left: 1%;

}


/* Header & Footer*/
------------------------------------
header, 
footer {

    background: #07BEB8;
    color: white;

}
header h1,
header h2 {
    color: #EDF2F4;
    margin: 0 auto;
}
/* Work Experience*/
------------------------------------
.work {

    background: #BDD9BF;

}

h3 ~ p {

    margin: 0;
}
.job-description {

    margin-bottom: 25px;
}
.job-description p:first-of-type {

    margin-top: 0;
}

/* Education*/
------------------------------------
.education {
    background: aqua;
}

p + h3 {
    margin-top: 30px;
}

/ html /     ------------------------------------

<!-- // Work Experience -->
    <section class="work">
        <div class="content-wrap">
            <h2>Work Experience</h2>
            <!-- Job Details: copy this block to add more positions. -->
            <div class="column-narrow">
                <h3>Marketing & Social Media Manager</h3>
                <p class="uppercase">Beauty9</p>
                <p>September 2018 - Present</p>
            </div>
            <div class="column-wide job-description">
              <p>........</p>
            </div>

<!-- // Education -->
                <section class="education">
                    <div class="content-wrap">
                        <h2>Education</h2>

                        <!-- School details: copy this block to add more schools. -->
                        <h3>University Of Bournemouth</h3>
                        <h4>BSc Arhaeology, 2018</h4>
                        <p>4 year course with 1 year in industry</p>

Answer 1

我相信这是代码前面的破折号。我将其放在下面的代码段中，效果很好。

foreach

.content-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px;
  overflow: hidden;
  border: 5px solid black
}

.column-narrow {
  width: 35%;
  float: left;
  padding-right: 0%;
}

.column-wide {
  width: 62%;
  float: left;
  padding-left: 1%;
}


/* Header & Footer*/

------------------------------------ header,
footer {
  background: #07BEB8;
  color: white;
}

header h1,
header h2 {
  color: #EDF2F4;
  margin: 0 auto;
}


/* Work Experience*/

.work {
  background: #BDD9BF;
}

h3~p {
  margin: 0;
}

.job-description {
  margin-bottom: 25px;
}

.job-description p:first-of-type {
  margin-top: 0;
}


/* Education*/

.education {
  background: aqua;
}

p+h3 {
  margin-top: 30px;
}