I want to make a class full bleed but I cant.
Here is the HTML :
<p>some info in the background</p>
<p>Some random content</p>
display: inline-block; // must use inline-block
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