Inline block css fails to make the element full width - html

Question

I want to make a class full bleed but I cant.
Here is the HTML :
<div class="main-class">
<div class="background">
<p>some info in the background</p>
</div>
<div class="content">
<p>Some random content</p>
</div>
</div>
and css :
.main-class{
padding: 20px;
width: 100%;
background-color: #fff;
display: inline-block;
box-sizing: border-box;
}
.background{
margin: -20px;
background-color: #eee;
display: inline-block; // must use inline-block
width: 100%;
padding: 20px;
box-sizing: border-box;
}
.content{
margin-top: 30px;
}
and here is a demo: https://jsfiddle.net/uumkjLy8/1/
the background class must be full bleed with background but as seen in the demo there is white space on the right side.

Answer 1

The background element is inside of an element that has padding, meaning it can only extend the full width if you do some sort of "cheesy" method to extend it outside of its parent element (width > 100%, etc).
Your negative margin is not going to fix the width because it is only moving the div, not enlarging it. With 100% width and a parent that has padding, it will never fully cover its parent's width.
See this fiddle please: https://jsfiddle.net/uumkjLy8/6/
I've removed the padding from .main-class, as well as the negative margins on your .background.

Answer 2

Remove box sizing from .background
https://jsfiddle.net/uumkjLy8/8/

Answer 3

I think you don't need the padding: -20px at the .background class. Furthermore, add a padding: 20px to the .content class in order to be lined-up with .background

Answer 4

This can be straightforward as:
.main-class {
background-color: #fff;
}
.content,
.background {
padding: 20px;
}
.background {
background-color: #eee;
}
<div class="main-class">
<div class="background">
<p>some info in the background</p>
</div>
<div class="content">
<p>Some random content</p>
</div>
</div>
...unless you are forced to use some of that redundant CSS...
In such case state that in your question.