Q:

Full width element exceeding parent's width - but with a max-width

I using this setup to make hero elements exceed to full page width:
Html:

main {
    max-width: 600px;
    margin: 0 auto;
}
    
.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}
<main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor...</p>
    <figure class="full-width">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/hero.jpg" alt="">
        <figcaption>Some text.</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempor...</p>
</main>

But I would like to set a max-width, so if the screen is more than, say, 2000px, then stop making the "full-width" element full width, but instead just 2000px wide and centered (and still exceeding the parent element's width). How can I achieve this?
I tried with:
@media (min-width: 2000px) {
  .full-width {
    max-width: 2000px;
  }
}

but it just pushed the element to one side.
JsFiddle here.

A:

This happnes because of margines. You can just use,
   .full-width{
    width: 100%,
    margin: 0px
    }

And also use
Padding : 0px

In parent if needed.

