Maico Williams Maico Williams - 4 months ago 31
CSS Question

How to ignore parent's width limit in CSS

An example of my code:


My website's content was placed like this to keep itself in the center of the page. With
in % and
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:

enter image description here

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.

[Live Link][1]

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

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

  2. and add css in .highlight class

    position: absolute; left: 0;

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