HTML/CSS容器宽度

我在继承父容器的宽度（或将其设置为100%）时遇到问题。 如果有人能指出解决办法，我将不胜感激， 我包括了这个JSFIDLE作为参考。

我认为这一问题是由安替比妥引起的

<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>

---

谢谢你的帮助

我想这会产生你想要的结果。看看，告诉我这是不是你想要的

.bg容器{
背景：黄色；
}
.按钮容器{
背景：红色；
宽度：100%；
}
.内联选项{
显示：内联块；
垂直对齐：顶部；
宽度：30%；
}
.标题{
左边距：10%；
保证金权利：10%；
}

这里有一些芦荟

这里有些IPSUM






我正试着把红色的容器拉伸到黄色容器的宽度。我认为问题源于填充属性

H.W。

我想这会产生你想要的结果。看看，告诉我这是不是你想要的

.bg容器{
背景：黄色；
}
.按钮容器{
背景：红色；
宽度：100%；
}
.内联选项{
显示：内联块；
垂直对齐：顶部；
宽度：30%；
}
.标题{
左边距：10%；
保证金权利：10%；
}

这里有一些芦荟

这里有些IPSUM






我正试着把红色的容器拉伸到黄色容器的宽度。我认为问题源于填充属性

H.W。

太完美了！谢谢@约翰：没问题！欢迎使用stack overflow，如果答案对您有效，请将其标记为已接受：）您的方法是完美的：）但是我不理解其背后的逻辑。我以前从未以这种方式使用过.header{}css。我认为标题在body标签上方，用户在浏览器中看不到。这让我有点震惊，但会发生什么？它是如何工作的？再次感谢。header没有什么特别的，只是我碰巧在html中命名了div。我可以在html中使用class=“boop”，在css中使用.boop{}，它也可以做同样的事情。使它工作的原因是我增加了宽度：100%；到buttonContainer类，并将填充从bg容器移动到.header，以便它不会移动buttonContainer。所以你是对的，填充造成了这个问题。我明白了，哈哈，我花了几秒钟才意识到它不是。无论如何，我只是在我的初始标签上添加了边距。我想这可能是目前对我来说更优雅的方式：）感谢所有的帮助：）它太完美了！谢谢@约翰：没问题！欢迎使用stack overflow，如果答案对您有效，请将其标记为已接受：）您的方法是完美的：）但是我不理解其背后的逻辑。我以前从未以这种方式使用过.header{}css。我认为标题在body标签上方，用户在浏览器中看不到。这让我有点震惊，但会发生什么？它是如何工作的？再次感谢。header没有什么特别的，只是我碰巧在html中命名了div。我可以在html中使用class=“boop”，在css中使用.boop{}，它也可以做同样的事情。使它工作的原因是我增加了宽度：100%；到buttonContainer类，并将填充从bg容器移动到.header，以便它不会移动buttonContainer。所以你是对的，填充造成了这个问题。我明白了，哈哈，我花了几秒钟才意识到它不是。无论如何，我只是在我的初始标签上添加了边距。我想这可能是目前对我来说更优雅的方式：）感谢所有的帮助：）

.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%;
    }