なぜ私のチャイルドディビジョンはその親を無視していますか？

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のままにします。