HTML/CSS Container Width

Question

I am having trouble inheriting a width of a parent container(or setting it at 100%). I would appreciate if someone could point out a solution, I included this JSFiddle for reference. https://jsfiddle.net/bawmcnLf/1/

I think the issue springs up from the padding atributes.

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

And the 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%;
    }

Thanks for your help.

Answer 1

This produces the result your looking for, I think. Take a look and tell me if it's what you want.

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