How to ignore parent's width limit in CSS

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: au…

Accepted Answer

Live Link

Yes it's possible only change by CSS. By few change:

just make `position: absolute;`to `relative` on class `.page`.

and add CSS in .highlight class

```
position: absolute;
left: 0;
```

solve it if you need anything more just make a comment.

How to ignore parent's width limit in CSS

Solution

Problem