Can anyone tell me why did this happen


Html Code

<header>
      <div class="loader"></div>
        <div class="container">
        <nav class="flex items-center justify-between center">
            <div class="left flex items-center justify-between">
                <div class="branding">
                    <h1 class="head">
                        Harry <span class="subtitle">Potter</span>
                    </h1>
                </div>
                <div>
                    <a href="#movies">Movies</a>
                    <a href="#book">Books</a>
                    <a href="#about_us">About Us</a>
                </div>
            </div>
            <div class="right">
              <a href="#contact_us">
                <button class="btn btn-primary">Contact Us</button>
              </a>
            </div>
        </nav>
        <div class="hero flex items-center justify-between">
            <div class="left flex-1 flex justify-center">
                <img src="Images/Main.png" alt="Harry Potter Sittitng">
            </div>
            <div class="right flex-1">
                <h6>Harry Potter</h6>
                <h1><span>Famous</span>
                    <br> 
                    Fictional Character</h1>
                    <p>Harry Potter is a famous fictional character. 
                        <br>
                       The role in Books is casted by Daniel Radcliffe.</p>
                      </div>
                    </div>
                  </div>
                </header>

CSS Code

body{
  background-color: var(--light );
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a{
  text-decoration: none;
}

span{
  color: var(--primary);
}

.loader{
  background: var(--dark) url(../Images/Loaders/Loader-1.gif) no-repeat center center;
  background-size: 75%;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
}

header {
  background-color: var(--dark);
  clip-path: polygon(0 0,100% 0,100% 100%,70% 90%,0 100%);
}

.container {
  max-width: 1152px;
  padding: 0 15px;
  margin: 0 auto;
}

.head{
  color: var(--light);
  font-size: 1.7rem;
  font-family: Ostrich;
}

.subtitle{
  color: var(--primary);
  font-family: Ostrich;
}

header nav .left a{
  color: var(--pure);
  text-decoration: none;
  margin-right: 2rem;
  text-transform: uppercase;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transistion: all .3s ease;
  -o-transition: all .3s ease;
}

header nav .left a:hover{
  color: var(--primary);
}

header nav{
  padding: 2rem 0;
}

header nav .branding{
  margin-right: 3rem;
}

.btn{
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  outline: none;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 4.5px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transistion: all .3s ease;
  -o-transition: all .3s ease;
}

.btn-primary{
  background: var(--primary);
  color: var(--secondary);
}

.btn-primary:hover{
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.hero{
  padding: 3rem 0;
}

.hero .left img{
  width: 400px;
}

.hero .right{
  color: var(--pure);
  margin-top: -7rem;
}

.hero .right h6{
  color: var(--primary);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.hero .right h1{
  font-size: 4rem;
  font-weight: 100;
  line-height: 1.2;
  margin-bottom: 2rem;
  font-family: Ostrich;
}

.hero .right h1 span{
  font-family: Ostrich;
}

.hero .right p{
  line-height: 1.9;
}

.content{
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
}

No

What happened?
What do you expected to obtain?
What’s your code?
What have you tried to fix the issue?


Html Code

<header>
      <div class="loader"></div>
        <div class="container">
        <nav class="flex items-center justify-between center">
            <div class="left flex items-center justify-between">
                <div class="branding">
                    <h1 class="head">
                        Harry <span class="subtitle">Potter</span>
                    </h1>
                </div>
                <div>
                    <a href="#movies">Movies</a>
                    <a href="#book">Books</a>
                    <a href="#about_us">About Us</a>
                </div>
            </div>
            <div class="right">
              <a href="#contact_us">
                <button class="btn btn-primary">Contact Us</button>
              </a>
            </div>
        </nav>
        <div class="hero flex items-center justify-between">
            <div class="left flex-1 flex justify-center">
                <img src="Images/Main.png" alt="Harry Potter Sittitng">
            </div>
            <div class="right flex-1">
                <h6>Harry Potter</h6>
                <h1><span>Famous</span>
                    <br> 
                    Fictional Character</h1>
                    <p>Harry Potter is a famous fictional character. 
                        <br>
                       The role in Books is casted by Daniel Radcliffe.</p>
                      </div>
                    </div>
                  </div>
                </header>

CSS Code

body{
  background-color: var(--light );
  font-family: Arial, Helvetica, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

a{
  text-decoration: none;
}

span{
  color: var(--primary);
}

.loader{
  background: var(--dark) url(../Images/Loaders/Loader-1.gif) no-repeat center center;
  background-size: 75%;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
}

header {
  background-color: var(--dark);
  clip-path: polygon(0 0,100% 0,100% 100%,70% 90%,0 100%);
}

.container {
  max-width: 1152px;
  padding: 0 15px;
  margin: 0 auto;
}

.head{
  color: var(--light);
  font-size: 1.7rem;
  font-family: Ostrich;
}

.subtitle{
  color: var(--primary);
  font-family: Ostrich;
}

header nav .left a{
  color: var(--pure);
  text-decoration: none;
  margin-right: 2rem;
  text-transform: uppercase;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transistion: all .3s ease;
  -o-transition: all .3s ease;
}

header nav .left a:hover{
  color: var(--primary);
}

header nav{
  padding: 2rem 0;
}

header nav .branding{
  margin-right: 3rem;
}

.btn{
  padding: 0.8rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border: 2px solid transparent;
  outline: none;
  cursor: pointer;
  text-transform: uppercase;
  border-radius: 4.5px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transistion: all .3s ease;
  -o-transition: all .3s ease;
}

.btn-primary{
  background: var(--primary);
  color: var(--secondary);
}

.btn-primary:hover{
  background: transparent;
  border-color: var(--primary);
  color: var(--primary);
}

.hero{
  padding: 3rem 0;
}

.hero .left img{
  width: 400px;
}

.hero .right{
  color: var(--pure);
  margin-top: -7rem;
}

.hero .right h6{
  color: var(--primary);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}

.hero .right h1{
  font-size: 4rem;
  font-weight: 100;
  line-height: 1.2;
  margin-bottom: 2rem;
  font-family: Ostrich;
}

.hero .right h1 span{
  font-family: Ostrich;
}

.hero .right p{
  line-height: 1.9;
}

.content{
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
}

please don’t create multiple topics for the same question, I have merged your two topics

can I explain what issue are you having with this page?

ok sorry I will not do this again