Question

What I have now is this page.

And I want the section title block “Employer Information” to be 40px wider than it naturally is, breaking out of its parent, as shown in this image.

Thus far I tried:

.content form ol {
    position: relative;
    z-index: 50;
}

.content form ol .section {
    position: absolute;
    left: -20px;
    width: 110%;
    z-index: 100;
}

And tried several other parent elements to be position:relative but it never worked.

Any idea? Thanks!

Answer 1

Your main class has overflow: hidden, so it’s masking the parts that are outside of it. Try your code with overflow: visible on .main.

Also Use position: relative in .section, or else it will be taken out of natural flow and the rest of the content jumps up behind it.