Having an issue.
I created a background image with gradient colors for my web project and clipped it. Within this element, there is text and a button that I want to be centered inside the element - with the text above and the button below. Initially, everything was centered as intended, but recently the button moved up above the text and now nothing is aligned in the center anymore.
Can anyone help me figure out why this is happening? I'm new to web design and feeling frustrated by this unexpected behavior. Any assistance would be greatly appreciated!
Thank you, Ivan Here is some of my 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>