Height and text responsiveness issues

Question

I'm working on a website for a client and the head hero section I've been working on is responsive except I'm having issues with the text overlapping the section below it whenever adjusting the height. How can I shrink the text or make it so it's in the flow of its section?

HTML:

<header class="hero">
<div class="hero-text">
  <li><a href="#">Meet Us</a></li>
  <span> | </span>
  <li><a href="#">Join Us</a></li>
  <span> | </span>
  <li><a href="#">Contact</a></li>
</div>
</header>

CSS:

.hero {
  background-image: url('../image/people.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  width: 100%;
  height: 90vh;
}

.hero-text {
  text-align: center;
  position: absolute;
  display: block;
  top: 65%;
  left: 0;
  right: 0;
  text-transform: uppercase;
}

.hero-text li {
  padding: 20px 0;
  margin: 0 auto;
}

.hero-text li a {
  color: white;
  padding: 5px;
  font-size: 1.5rem;
  border-bottom: 1px solid white;
  width: 50%;
}

span {
  display: none;
}

Here is a screenshot of the website: Screenshot

Answer 1

Your Code has some syntax issues (ul missing and you should always use only li tags in your ul. The reason why its overlapping is because of the 90vh which is the relation for the absolute positioned hero text. I would do follwing:

.hero {
  background-image: url('https://picsum.photos/200');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 90vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.divider {
  padding:0.5rem 0;
  display:none; /* THIS HAS CHANGED */
  width:1px;
  background-color:white;
  height:50px;
}

.hero-text {
  display:flex;
  flex-direction:column; /* THIS HAS CHANGED */
  align-items:center;
  text-transform: uppercase;
  list-style:none;
  gap:2rem;
}

.hero-text li a {
  color: white;
  text-decoration:none;
  padding: 5px;
  font-size: 1.5rem;
  border-bottom: 1px solid white;
  width: 50%;
}


/* THIS HAS CHANGED ABOVE ARE ALL MOBILE STYLES 
AND FOLLOWDING ARE THE DESKTOP ADJUSTMENTS in a min-width query */
@media (min-width: 768px) {

  .hero-text {
    flex-direction:row;
  }

  .divider {
    display: block;
  }
  
}

<header class="hero">
  <ul class="hero-text">
    <li><a href="#">Meet Us</a></li>
    <li><span class="divider"></span></li>
    <li><a href="#">Join Us</a></li>
    <li><span class="divider"></span></li>
    <li><a href="#">Contact</a></li>
  </ul>
</header>