I am facing an issue with my div structure. Within the main div, I have another nested div and within that, there is one more nested div. My goal is to make the last div appear to float outside of both parent divs, like a badge sticking out of the main div. However, my current implementation is not working as expected. The main div expands but the background color does not cover those extra pixels, revealing the body's background behind it.
Below is the code snippet I am using:
#main {
background-color: #000;
outline: 1px solid #fff;
width: 840px;
padding: 20px 60px 20px 60px;
}
#nested1 {
width: 100%;
position: relative;
margin: 0px 0px 10px 0px;
}
#nested2 {
position: absolute;
top: 100px;
right: -80px;
}