HTML/CSS 容器宽度

Question

我无法继承父容器的宽度（或将其设置为 100%）。如果有人能指出解决方案，我将不胜感激，我包含了这个 JSFiddle 以供参考。 https://jsfiddle.net/bawmcnLf/1/

我认为问题是由填充属性引起的。

<div class="bg-container">
   <h1>
    SOME LORUM HERE
   </h1>

    <div class="bg-container buttonContainer">
  <br>
  <br>
  <br>
    <div class="inline-choices cWidth"><img height="50%" width="50%" src="http://www.petpicturegallery.com/pictures/cats/funnycat/134-cat_funnycat_funny_cat_12.jpg" /> </div>
   <div class="inline-choices cWidth">
    <h4> I am trying to strech the red container to the width of yellow container. I think the issue springs from padding attribute. <br><br> <button class="buttonENC" type="button" onclick="alert('Hello world!')">H.W.</button></h4> </div>
   </div>
  </div>

和CSS：

.bg-container {
   padding-left: 10%;
   padding-right: 10%;
   background: yellow;
   background-size: cover;
   background-position: center;
 }

 .buttonContainer {
   background: red;
  }

 .inline-choices {
   display: inline-block;
   vertical-align: top;
   width: 30%;
    }

感谢您的帮助。

Answer 1

我想这会产生您想要的结果。看看是不是你想要的。

.bg-container {
  background: yellow;
 }
   .buttonContainer {
  background: red; 
    width: 100%;
 }
  .inline-choices {
  display: inline-block;
  vertical-align: top;
  width: 30%;
 }
  .header{
    margin-left: 10%;
    margin-right: 10%;
  }

<div class="bg-container">
  <div class="header">
    <h1>
   SOME LORUM HERE
  </h1>
    <HR>
    <H2>
   SOME IPSUM HERE 
  </H2>
</div>
  <div class="bg-container buttonContainer">
    <br>
    <br>
    <br>
    <div class="inline-choices cWidth"><img height="50%" width="50%" src="http://www.petpicturegallery.com/pictures/cats/funnycat/134-cat_funnycat_funny_cat_12.jpg" /> </div>
    <div class="inline-choices cWidth">
      <h4> I am trying to strech the red container to the width of yellow container. I think the issue springs from padding attribute. <br><br> <button class="buttonENC" type="button" onclick="alert('Hello world!')">H.W.</button></h4> </div>
  </div>
</div>

HTML/CSS 容器宽度

HTML/CSS Container Width

html

css

inheritance

containers

width