CSS styling not symmetrical in different size window - html

Question

So I made a simple page that looks like below:
It looks fine but if I change it to a smaller window or changing the zoom %, this is what it looks like:
As you can see, it's not right as the button is way off but the <p> and <h> tag seems to be align but not the button.
Here is my relevant part of the code:
function Pitch() {
return (
<div className="section">
<div className="descriptionpitch">
<h1>See what's next.</h1>
<p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
</div>
<div className="joinbutton">
<button>JOIN FREE FOR A MONTH</button>
</div>
</div>
);
}
scss:
.section {
color: white;
margin: 0 3%;
position: absolute;
top: 35%;
font-size: 1.8vw;
//text-align: center;
#media (max-width: 1000px) {
top: 55%;
font-size: 1.9vw;
}
#media (max-width: 800px) {
top: 60%;
font-size: 3.2vw;
margin: 0 4em;
text-align: center;
}
h1 {
font-size: 3em;
margin: 0 0 0.2em;
font-weight: 700;
}
p {
margin: 0 3.5em 0 0;
font-weight: 700;
}
button {
font-size: 14px;
letter-spacing: 1.9px;
font-weight: 100;
margin: 1.2em 24.5em 0 0;
padding: 12px 2em;
color: white;
background-color: #e50914;
cursor: pointer;
text-decoration: none;
//vertical-align: middle;
font-family: Arial, sans-serif;
border-radius: 2px;
user-select: none;
// text-align: center;
border: 0;
&:hover {
background-color: #e53935;
}
}
}
Is there a way i could fix this?

Answer 1

Try this code..add this in same div.. if u want more space at the top of the button. add margin-top for this button
function Pitch() {
return (
<div className="section">
<div className="descriptionpitch">
<h1>See what's next.</h1>
<p>WATCH ANYWHERE. CANCEL ANYTIME.</p>
<button>JOIN FREE FOR A MONTH</button>
</div>
</div>
);
}
And modify this css code too..
css
#media (max-width: 800px) {
.section {
text-align: left;
}
}

Answer 2

In your CSS code, make on change, remove text-align: center; from this block
...
#media (max-width: 800px) {
top: 60%;
font-size: 3.2vw;
margin: 0 4em;
/* text-align: center; */
}
...
working demo on stackblitz here

Answer 3

Remove the margin-right from the button in your 800px media query.