How can I override a parent element's padding from a child

Question

I have a UL nested inside a DIV, with the DIV having padding set to "0 20px". I'd like to have this one child UL overflow over the parent DIV and extend out to the page left and right. How can I do this?

Answer 1

If you are just trying to offset the padding on the div, maybe you could achieve that by doing something like this on the UL:

margin:0 -20px;

Answer 2

if you want the UL to expand out of the container div then you need to set the UL to have an absolute position. Dont forget to set the top and left styles to get the UL to not be up tight against the DIV as position absolute wont obey the containers div padding

Answer 3

.full-width {
   width: 100vw;
   position: relative;
   left: 49%;
   right: 49%;
   margin-left: -50vw;
   margin-right: -50vw;
}

https://css-tricks.com/full-width-containers-limited-width-parents/

Answer 4

It works in the following way:

#parent {
position: relative; /* important */
padding: 0 25px;
}


#child {
position: absolute; /* important */
width: 100%;
margin-left: -25px;
}