Make an inner div expand to the full-width of the page

When a div is inside another div, adding width: 100% will only stretch it to the width of its container. To make the stretch to the full width of the page (or viewport), use this

1
2
3
4
5
6

.stretch-full-width {
    width:  100vw;
    max-width:  100vw;
    margin-left:  calc(50% - 50vw); 
    /* setting left margin as 50% of parent div's margin moves this div to the middle of the page. Then pull it back by a width that is half of the page's entire width. */
}

Related Posts: