Q:

h3 element slips away in mobile device

I have a problem with a h3 element on my web page. It looks ok on desktop, but on mobile devices slips away, as you can see in the following screenshots.
the h3 element is in a div which has the following css:
.experiental-header {
     position: absolute;
     text-align: center;
     width: 100%;
 }

and the h3 element has the following css:
.experiental-header h3 {
    margin: 0 auto;
    width: 635px;
    padding: 50px;
    background: rgba(255, 255, 255, .5);;
    text-align: center;
    }

and in mobile device:

I tried in many ways to solve this problem, but none of them has worked well, I don't have too much experience with responsive media queries.
Can you please help me on this? Thank you!
I edited my question:
Now it displays ok, but the text "Experiental" is not changing font size when in responsive mode, as you can see attached:
I have tried with:
 font-size: 3em;

but it seems that it is not enough. Can you please advise?

A:

In Experimental-header h3apply width in percentages. So it will works well in responsive.

.experiental-header {
     position: absolute;
     text-align: center;
     width: 100%;
 }
.experiental-header h3 {
    margin: 0 auto;
    width: 30%;
    padding: 50px;
    background:green;
    text-align: center;
    font-size: 2.9vw;

    }
<div class="experiental-header">
  <h3>Heading-3</h3>
</div>

