Responsive header with text and button - html

Question

I am making a simple header with text and a button but when I go on mobile everything isn't responsive . I tried using %'s but nothing was working. And my CSS jumps up and down when I scroll on mobile. This is the codepen, https://codepen.io/Religion/pen/ZEQerQZ. Below is the CSS . HTML you can check on the codepen due to the post saying it's mostly code.
CSS:
#media only screen and (max-width: 767px) {
.header1{
padding: 15%;
text-align: center;
background-image: url('https://manchesterdental.org/img/dentalimg/welcomenote.jpg');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
color: white;
font-size: 30px;
position: relative;
}
.header-text1 h2{
margin-top:20%;
font-size:1.8rem;
width:45vh;
margin-left:-20%;
color:white;
}
.header-text1 p{
font-size:1.1rem;
width:44vh;
margin-left:-20%;
padding-top:40px;
color:white;
font-weight: 500;
}
.header-text{
position: absolute;
bottom:0;
left:0;
width:1px;
}
.button {
background-color: #00aeef; /* Green */
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
margin-left: 2%;
width:95%;
margin-bottom: 20px;
}
}
#media (min-width:900px) {
.header1{
padding: 60px;
text-align: center;
background-image: url("{% static 'dentist/img/bg-img/header.jpg' %}");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
color: white;
font-size: 30px;
height:80vh;
}
.header-text1 h2{
margin-top:10%;
color:white;
font-size: 3rem;
}
.header-text1 p{
padding-top:40px;
font-size:1.5rem;
max-width:80%;
margin-left:10%;
color:white;
font-weight: 500;
}
.button {
background-color: #00aeef; /* Green */
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
margin-left: 2%;
width:45%;
font-family: "Comic Sans MS", cursive, sans-serif;
font-weight:800;
}
}
HTML:
<div class="header1">
<div class = "header-text1">
<h2>We Believe Everyone Should Have Easy Access To Great Dental Care</h2>
<p >As a leading industry innovater, * Dental Business* is opening up exciting new opportunities for dental professionals, investors, employees & suppliers. Contact us to find out what we have to offer you.</p>
<br>
<button class="button button1">Contact Us!</button>
</div>
</div>

Answer 1

To keep the text elements centered in the div, you can make use of flexbox. Simply add the following code to the top of your CSS file before the media queries:
.header-text1 {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
}
Also, no need to include this with your media queries since flexbox will handle everything regardless of viewport size.
This Codepen had the updated code - also changed the second media query so that the CSS doesn't break between 767px and 900px like it did before.

Answer 2

You are currently setting the margin-top property to 20% of the height of the button itself.
If you want the margin to respond to the width of the viewport, then use something like:
margin-top: 2vw; // 2% of the viewport width
However, for the margin-top property, I suggest using the height of the viewport like so:
margin-top: 1vh; // 1% of the viewport height (1% should be enough)