CSS: text and button changes their order and position

Question

I have a problem.

For my web project I created a background image with gradient colour and clipped it. On this element I have some text and a button and I want everything to be centered inside the element, before the text and down of it the button. It was working fine for a while but then my button moved before the text and both elements stays no more in the centre of the but at the top.

Why? I am newbie with web design so I'm getting crazy, if someone can help I appreciate! Thanks, Ivan Here some code:

* {
margin: 0;
padding: 0;
   }

body {
  font-family: "Inter", sans-serif;
  color: #444;
  padding: 10px;
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 0;
  height: 95vh;
  background-image: linear-gradient( to bottom, rgba(255, 255, 255, 0.9) 33%, hsla(224, 62%, 29%, 0.9), rgba(228, 24, 27, 0.8)), url(../Images/moscow.jpg);
  background-size: cover;
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

.hero-box {
  position: absolute;
  text-align: center;
}

.hero-description {
  margin: auto;
  max-width: 66%;
  text-align: center;
  letter-spacing: 1.5px;
}

.hero-btn {
  display: inline-block;
  color: #444;
  background-color: #fff;
  padding: 10px;
  text-decoration: none;
  border: 1px solid #444;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 600;
}

.hero-btn:hover {
  color: #555;
  background-color: #f1f1f1;
  padding: 11px;
  border: 1px solid #555;
}

<div class="hero">
  <div class="hero-box">
    <h2 class="hero-description">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus facilis similique cupiditate temporibus excepturi, consectetur, expedita aut molestias fuga unde id nam doloremque laborum adipisci enim soluta ut nisi in!
    </h2>
    <a href="#" class="hero-btn">Visit</a>
  </div>
</div>

Answer 1

You can use grid and the place-items: center property to put the content right in the middle of your hero div as follows:

body {
  font-family: "Inter", sans-serif;
  color: #444;
  padding: 10px;
}

.hero {
  display: grid;
  /* added this */
  place-items: center;
  /* added this */
  padding: 0;
  margin: 0;
  height: 95vh;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 33%, hsla(224, 62%, 29%, 0.9), rgba(228, 24, 27, 0.8)), url(../Images/moscow.jpg);
  background-size: cover;
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

.hero-box {
  text-align: center;
}

.hero-description {
  margin: auto;
  max-width: 66%;
  text-align: center;
  letter-spacing: 1.5px;
}

.hero-btn-container {
  display: grid;
  place-items: center;
  height: 50px;
}

.hero-btn {
  display: inline-block;
  color: #444;
  background-color: #fff;
  padding: 10px;
  text-decoration: none;
  border: 1px solid #444;
  border-radius: 5px;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 600;
}

.hero-btn:hover {
  color: #555;
  background-color: #f1f1f1;
  padding: 12px;
  outline: 1px solid #555;
}

<div class="hero">
  <div class="hero-box">
    <h2 class="hero-description">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus facilis similique cupiditate temporibus excepturi, consectetur, expedita aut molestias fuga unde id nam doloremque laborum adipisci enim soluta ut nisi in!
    </h2>
    <div class='hero-btn-container'>
      <a href="#" class="hero-btn">Visit</a>
    </div>
  </div>
</div>

P.S. I've also changed your button:hover rule to have an outline and not a border so it doesn't push up your text by 1 pixel when you hover over it.