How to ignore parent's width limit in CSS [closed]

Question

An example of my code:

Check this link https://jsfiddle.net/b5woxesg/

Explaining:

My website's content was placed like this to keep itself in the center of the page. With width: in % and max-width: in px to not strech. This content is called from a Markdown file, since I am using jekyll.

What I want to do is: whenever I call the {% highlight %}in the MD file, the code block the is generated should be with width: 100% but ignoring the parent's width limit. I mean 100% of the whole page. Also, the text inside should keep in alignment with the page content. Something like that:

But the highlight div is inside the content with blue border.

I believe that there's no way to do this without changing the current structure, I have no problem with that, but since i'm using a MD file, some changes can be restricted.

@EDIT: Solution:

Thank you all for the help.

I used the @MD Ashik tip and improved it with a easy jQuery code that save the .highlight height (since I'm using height: auto the height could be any number). Then I created a div class="space" next to the .highlight, that only is used to fill the space in the content. So I set the .space div with the exactly height of .highlight

Check it out: https://jsfiddle.net/b5woxesg/7/

Answer 1

If you don't want to use positioning to achieve this, you can do something like this:

HTML:

<div class="container-with-fixed-width">
    <div class="fluid"></div>
</div>

CSS:

.fluid {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}