How can I move this text up using CSS?

Move s1-text and s2-text inside the .hero class:

  <div class="hero">
    <h1 class="s1-text center-block">WELCOME TO MY</h1>
    <h1 class="s2-text center-block">PORTFOLIO</h1>
  </div>

Add position: relative; to .hero class, so that the absolutely positioned s1-text and s2-text stay inside hero:

.hero {
  background: url("https://static.pexels.com/photos/38892/pexels-photo-38892.jpeg") center center no-repeat;
  background-attachment: fixed;
  background-size: cover;
  width: 100%;
  max-width: 100%;
  width: 100vw;
  height: 60%;
  position: relative;
}

And then add absolute positioning to the texts like this:

.s1-text {
  text-align: center;
  color: black;
  z-index: 99;
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
}

.s2-text {
  text-align: center;
  color: black;
  z-index: 99;
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
}

Working Demo On Codepen