How can I make my wrapper bleed to the right in a particular section?

Question

For a project I have a page where everything is in a wrapper and I scale that wrapper as the screen size gets bigger. Imagine each box being a section.

The middle section bleeds to the right but keeps the same margin to the left as the wrapper does. I don't know the exact width of the the section + the margin on the right and if I do, when it scales it will change. I want the left side to scale inline with the other sections as the browser changes like it does in a regular wrapper.

https://codepen.io/seandaniel/pen/oNvKjop

 .wrapper { width: 60rem; margin: 0 auto; }.section-1 { background-color: black; width: 100%; height: 200px; }.section-2 { background-color: blue; /* this width is just to show what I want it to look like */ width: 1224px; height: 200px; margin-left: auto; }.section-3 { background-color: orange; width: 100%; height: 200px; }

 <main> <div class="wrapper"> <section class="section-1"> </section> </div> <section class="section-2"> </section> <div class="wrapper"> <section class="section-3"> </section> </div> </main>

Answer 1

Is this what you want to happen? The wrapper will stay the same distance from the left no matter what. Although I'm not sure if you want your wrapper in the center center (x,y) at all times.

CSS

 .wrapper { border: 1px solid green; width: 100%; position: absolute; left: 45px; }.section-1 { background-color: black; width: 100%; height: 200px; position: relative; }.section-2 { background-color: blue; width: 125%; height: 200px; margin-left: auto; position: relative; }.section-3 { background-color: orange; width: 100%; height: 200px; position: relative; }

 <main> <div class="wrapper"> <section class="section-1"> </section> <section class="section-2"> </section> <section class="section-3"> </section> </div> </main>

Answer 2

1. In your .section-2 class add the following css rule margin-right: calc(50% - 50vw);
2. You will also need to nest your <section class="section-2"></section> into the same <div class="wrapper"></div> as your other sections to have the same left alignment.

If you want it to bleed to the left, use margin-left: calc(50% - 50vw); instead of margin-right , or have both to be full width.

This page has a lot of good information about manipulating margins within a container. Full Width Containers in Limited Width Parents

 .wrapper { width: 60rem; margin: 0 auto; }.section-1 { background-color: black; width: 100%; height: 200px; }.section-2 { background-color: blue; height: 200px; margin-right: calc(50% - 50vw); }.section-3 { background-color: orange; width: 100%; height: 200px; }

 <main> <div class="wrapper"> <section class="section-1"> </section> </div> <div class="wrapper"> <section class="section-2"> </section> </div> <div class="wrapper"> <section class="section-3"> </section> </div> </main>