I am currently working on creating a modal that will be displayed in the center of the screen with the same width as the main page. However, I am facing an issue where the modal is not perfectly centered. I suspect that this is due to the overflow style adding a scroll on the right side. How can I resolve this issue?
<body>
<main>
<h1>Welcome to the Main Page</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam rerum molestiae tempora nesciunt illo, id placeat unde similique eius mollitia. Accusantium a cum libero impedit quidem alias molestiae, odio, saepe aspernatur provident temporibus, vel dolorum suscipit.
</p>
<button>Click to show modal</button>
</main>
<div class="modal-container">
<div class="modal-wrapper">
<h2>The Modal Page</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque tenetur voluptates quidem, nemo, eius fugit sit reprehenderit, temporibus libero, eum recusandae? Fugit nam blanditiis soluta a.
</p>
</div>
</div>
<script>
document.querySelector("button").addEventListener("click", ()=> document.querySelector(".modal-container").classList.add("show"));
</script>
<script src="script.js"></script>
</body>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
width: min(calc(100% - 3.125rem), 45.625rem);
height: 200vh;
position: relative;
left: 50%;
transform: translate(-50%, -5%);
background-color: aqua;
}
.modal-container {
position: fixed;
inset: 0;
padding: 20vh 0;
background: rgba(0, 0, 0, 0.6);
opacity: 0;
overflow: scroll;
pointer-events: none;
transition: 200ms;
}
.modal-container.show {
opacity: 1;
}
.modal-wrapper {
width: min(calc(100% - 3.125rem), 45.625rem);
height: 150vh;
margin: auto;
padding: 1.75rem 1.25rem;
pointer-events: none;
transition: 200ms;
border-radius: 0.5rem;
background-color: aquamarine;
}