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

Question

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.

Answer 1

This happnes because of margines. You can just use,
.full-width{
width: 100%,
margin: 0px
}
And also use
Padding : 0px
In parent if needed.

Answer 2

You could use display: flex property in order to handle the alignment:
main {
max-width: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.full-width {
width: 100vw;
position: relative;
}
#media (min-width: 2000px) {
.full-width {
max-width: 2000px;
}
}
img {
width: 100%;
}