content is exceeding my box (small CSS issue) - css

Question

Im copying this Gensis Theme for CSS practice: http://my.studiopress.com/themes/daily-dish/#demo-full
I am now having an issue, since one of the black boxes exceeds its parent-Box.
The attribute causing this is the following code
.heading{
padding-left: 2em;
however I want this padding. How do I make the black background stop at the end of the parent box(id='right_1') and maintain the left padding?
*You have to scroll to the right when you run the snippet to see the issue
*{
margin: 0 auto;
}
body{
margin: 0 auto;
background-image: url('background.png');
}
.heading{
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
}
header{
padding: 70px;
display: flex;
flex-direction: column;
align-items: center;
}
#wrapper{
border: 1px solid lightgrey;
padding-left: 40px;
padding-right: 40px;
margin: auto;
width: 960px;
height: 2000px;
background: white;
}
main{
display: flex;
border: 1px solid red;
}
.blackbox{
}
#left {
width: 100%;
display: flex;
height: 1000px;
border: 1px solid black;
}
#left_1{
display: flex;
width: 100%;
}
#right {
margin-left: 5%;
width: 30%;
display: flex;
border: 1px solid black;
}
#right_1{
width: 100%;
}
<main>
<section id='left'>
<section id='left_1'>
<h2 class='heading'>Featured Dish</h2>
</section>
</section>
<aside id='right'>
<aside id='right_1'>
<h2 class='heading'>About the Author</h2>
</aside>
</aside>
</main>
</div>

Answer 1

You can add box-sizing:border-box to the .heading element.
This way the width and height properties include the padding.
CSS would be:
.heading {
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
box-sizing: border-box; // Add box-sizing: border-box
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
Hope this helps :)

Answer 2

You can solve this issue making box-sizing: border-box;
Try below CSS
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
JSFIDDLE DEMO
Read more about box-sizing