为什么我的Child Div忽略了它的父母？

Question

我使用一系列div创建了一个技能部分。基本上当我将子div设置为100％宽度时，它应该是父元素的100％宽度对吗？但由于某种原因，它超过了它。我不明白为什么。

这是我的HTML和CSS，因此您可以全面了解正在发生的事情：

aside {
  background-color: #5abbd8;
  padding: 50px 0px;
}

.wrapper {
  margin: 0px 5%;
}

.skills-title {
  margin-bottom: 50px;
}

.skill-points {
  margin: 50px 0;
}

.point-container {
  background-color: #f2f2f2;
  width: 100%;
  height: 20px;
  margin: 25px;
  border-radius: 10px;
}

.points {
  background-color: #FED36E;
  height: 20px;
  border-radius: 10px;
  position: relative;
}

.html {
  width: 70%;
}

.css {
  width: 60%;
}

.js {
  width: 30%;
}

.skill-level-indicator {
  width: 45px;
  position: absolute;
  right: -10px;
  top: -23px
}

.skill-percent {
  position: absolute;
  color: #FAFAFA;
  top: -34px;
  right: 0px;
  font-weight: 400;
  font-size: 0.75em;
}

<aside>
  <div class="wrapper">
    <h2 class="skills-title">Skills</h2>
    <div class="skill-info">
      <p>I am currently studying a Tech-degree in Front-End Web Development with Team Treehouse. The degree covers HTML CSS and JavaScript. I am now in the process of completing my second project out of 12.</p>
      <p>Below is a list of my skill levels within the coding languages I am learning.</p>
    </div>
    <!-- SKILL LEVEL INDICATORS -->
    <div class="skill-points">
    
      <p>HTML</p>
      <div class="point-container">
        <div class="points html">
          <img src="images/Skill-Level-Percent.png" alt="Skill-Level-Indicator" class="skill-level-indicator" />
          <p class="skill-percent">70%</p>
        </div>
      </div>

      <p>CSS</p>
      <div class="point-container">
        <div class="points css">
          <img src="images/Skill-Level-Percent.png" alt="Skill-Level-Indicator" class="skill-level-indicator" />
          <p class="skill-percent">60%</p>
        </div>
      </div>

      <p>JavaScript</p>
      <div class="point-container">
        <div class="points js">
          <img src="images/Skill-Level-percent.png" alt="Skill-Level-Indicator" class="skill-level-indicator diy" />
          <p class="skill-percent">30%</p>
        </div>
      </div>

    </div>
  </div>
</aside>

谢谢！

Answer 1

100％宽 的边距为25像素。

因此，如果容器宽度为200px，那么它将从25px点运行到225px点。

如果您希望宽度填充边距，边框和填充后剩下的任何空间，请将宽度保留为auto。