Ignoring Parent Div Width

Question

So I have an image (or a div that will contain the image) that I would like to use as a banner for portfolio.

I would like this image to be the full width of the page (not height). However, this image is nested inside a div that contains all the information for each of my portfolio projects, and will not allow me to stretch outside of the container.

However, the current state of how I set margins and containers within my portfolio is a little messy, so examples online have been hard to follow.

The following are nested in the following order:

The ID that contains all of the projects

#contentContainer2 {
   width: 100%;
   background-color: #FFFFFF;
   margin-right: 0;
   margin-left: 0;
   padding-bottom: 6em;
}

The ID that pushes the content/sets spacing:

#marginSetter2 {
   width: 63em;
   margin-left: auto;
   margin-right: auto;
   height: auto;
   padding: 0;
}

The ID that contains the individual project (and where the div that I want to extend to full width lives):

#projectDescription1 {
   padding-top: 1em;
}

If you would like to take a closer look at the code, please DM me and I will be happy to send you the link to the live version of my portfolio.

I apologize if stuff is a little messy; I started to build this portfolio when I was first starting to get out of my comfort zone with html/css/javascript, so I was not as experienced, and haven't gotten around to making large scale fixes.

Cheers, Alejandro

Answer 1

/* Actual banner image */
width: 100%;
position: absolute;
left: 0%;

Answer 2

You can probably do this by using position-absolute. However, from a design standpoint, I would consider refactoring your containers a bit. Consider wrapping your container with margins in a new div along with this image instead of trying to shoehorn the image into a container it doesn't belong in.