Responsive header not working

Question

I was following a tutorial and they show the app being responsive, but I couldn't get it to be responsive and it look like I'm not the only one having the same problem. In the video they showed doing the responsiveness of the text without using media queries (I know how to do it with media queries). I tried to change the html font-size to 10px and .8vw. I'm using rem because according to this tutorial is't he best too use for responsiveness since it will grab the root value and do the conversion, in this case the root will be the html

https://jsfiddle.net/wearetamo/zckeynuq/

Desktop view working

Mobile view not working

HTML

<header class="header">
            <div class="logo-box">
                <img src="img/logo-white.png" alt="Logo" class="logo">
            </div>

            <div class="text-box">
                <h1 class="header-primary">
                    <span class="heading-primary-main">
                        Outdoors
                    </span>
                    <span class="heading-primary-sub">
                        is where life happens
                    </span>

                    <a href="#" class="btn btn-white btn-animated">Discover our tours</a>
                </h1>
            </div>
        </header>

CSS

.
.
.
*, 
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
     /* 80% of view port width which computes to
      font-size of 10.25px for my laptop screen */
}

body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.7;
    color: #777777;
    padding: 3rem;
    box-sizing: border-box;
}

/* HEADER */

.header {
    height: 95vh;
    background-image: 
        linear-gradient(to right bottom,
                      rgba(126,213,111,.8),
                      rgba(40,80,131,.8) ),
        url('../img/hero.jpg'); 
    background-size: cover;
    background-position: top; 

    /*Giving shape to the picture*/
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    /*To make  triangle 50% 0, 100% 100%, 0 100%
    https://bennettfeely.com/clippy/
    */

    position: relative;
}

.header>.logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
}

.header>.logo-box>.logo  {
    height: 3.5rem;
}

.header>.text-box {
    position: absolute;
    top:40%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.header>.text-box>.header-primary {
    color: white;
    text-transform: uppercase;
}

.header>.text-box>.header-primary>.heading-primary-main {
    display: block;
    font-size: 6rem;
    font-weight: 400;
    letter-spacing: 3.5rem;
    animation-name: moveInleft;
    animation-duration: 1s;
    animation-timing-function: ease-out
}

.header>.text-box>.header-primary>.heading-primary-sub {
    display: block;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 1.74rem;
    animation: moveInRight 1s ease-out;
    backface-visibility: hidden
}
.
.
.

Answer 1

It is because for font size bigger than you window width

    <span class="heading-primary-main">
                            Outdoors
                        </span>
                        <span class="heading-primary-sub">
                            is where life happens
                        </span>

make those span font lower than your window width i.e make font-size:14px or 18px

@media (max-width:640px){
  .heading-primary-main{
    font-size:18px; 
  }
  .heading-primary-sub{
    font-size:14px;
  }
}

Answer 2

You can try doing this.

Set your font-size using fluid-typography

font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));

and then set your letter-spacing using vw (viewport width).

Please see this link for JSfiddle

Sample code below.

.header>.text-box>.header-primary>.heading-primary-main {
    display: block;
        font-size: calc(30px + (40 - 30) * ((100vw - 500px) / (1400 - 500)));
        font-weight: 400;
        letter-spacing: 4vw;
        animation-name: moveInleft;
        animation-duration: 1s;
        animation-timing-function: ease-out
}

.header>.text-box>.header-primary>.heading-primary-sub {
    display: block;
        font-size: calc(13px + (18 - 13) * ((100vw - 500px) / (1400 - 500)));;
        font-weight: 400;
        letter-spacing: 1.3vw;
        animation: moveInRight 1s ease-out;
        backface-visibility: hidden;
}

---

If using fluid-typography did not work on what you wanted.

I suggest you use variable font size using Media Queries.

Please see this link.